Hide close icon on window

[Donna Stewart]

Is there any way to hide the close icon on the kendo mvc extension window?

Thank you,
Donna

[Dimo]

Hi Donna,

Similarly to the MVC Window, the Close button of the Kendo UI MVC Window is hidden by not including it in the buttons collection:

.Actions(actions => actions.Maximize())

Regards,
Dimo
the Telerik team

[Donna Stewart]

Hi Dimo,

Thank you for your response.  I would like to not have any buttons on my window.  I tried the following code but it didn't work.  Is there a way to have no buttons?  Thank you so much!

Donna

@{

    ViewBag.Title = "Index";

}

@(Html.Kendo().Window().Name("surveyWindow").Title("GMC Survey")

    .Width(750).Height(450).HtmlAttributes(new {style = "font-size:1.5em;"}).Actions(a => a.Clear())

    .LoadContentFrom("SurveyQuestion", "Home", new {questionNum = 1}).Events(e => e.Open("doOpen")))

 

<script type="text/javascript">

    function doOpen() {

        var kendoWindow = $("#surveyWindow").data("kendoWindow");

        kendoWindow.center();       

    }

</script>

 

<style type="text/css">

div.k-window-titlebar

  

{

    font-size: 1.75em;

    line-height: 1.2;

    color: #719501;

}

</style>

[Dimo]

Hi Donna,

I am afraid the Window is not designed to have no buttons at all, but you can hide the remaining Close button with CSS:

.k-window-action
{
    visibility: hidden ;
}

Note that if used globally, the above style will influence all buttons on all pages.

All the best,
Dimo
the Telerik team

[Donna Stewart]

Yes, that worked.  Thank you!

[Atanu]

Is there any way to do the same from javascript so that it effect only a single window and not influence other windows.

Looking forward to your reply.

Thanks

[Evan]

$("#MyPopup").parent().find(".k-window-action").css("visibility", "hidden");

[Nathan]

That's still wrong that will still do it to every window!

Not this:
$("#MyPopup").parent().find(".k-window-action").css("visibility", "hidden");
this
$("#MyPopup").find(".k-window-action").css("visibility", "hidden");

[Evan]

Um, no, yours doesn't even work. Try testing your code out before accusing someone else of posting wrong code.

If you actually look at the DOM rendered by the popup windows, the reason mine works is because the element with class of "k-window-action" is actually a SIBLING of #MyPopup, not a descendent. You have to get the direct parent of the popup element and then find the k-window-action within.

Yours will not find ANY k-window-action elements within #MyPopup and will do nothing at all.

http://jsfiddle.net/xg5G7/19/

[Nathan]

Many apologies, no offence was intended.

My bad, it's because I was using the wrapper:

$("#window").data("kendoWindow").wrapper.css({ height: 112, width: 230, left: 220, top: 72 }).find(".k-window-action").css("visibility", "hidden");

[Sreejith]

Also with the latest build as of today,  you can use 

 .Actions(actions => actions.Clear())

 

@(Html.Kendo().Window()
            .Name("popupWin")
            .Title("Select a Search Service Account")
            .Actions(actions => actions.Clear())
            .Visible(false)
            .Width(500)
            .Height(185)
            .Draggable()
            .LoadContentFrom("GetData", "Home")
            .Modal(true)
            .Events(e => e
            .Open("onWinOpen")
            .Refresh("onWinRefresh")
            .Error("onVarValWin_Error")
          )
    )

 

Thanks

Sree

[Summit Insights]

Hi,

In my scenario I have two actions in the action bar as follows:

$("#requestWindow").kendoWindow({
        draggable: false,
        resizable: false,
        modal: true,
        title: "My title",
        actions: ["Refresh", "Close"]
    });

What I want is to only hide one of the actions.

This will hide both actions:

$("#requestWindow").parent().find(".k-window-action").css("visibility", "hidden");

And this hides one option but you can still hover the "invisible" button (see attached image):

$("#requestWindow").parent().find(".k-i-refresh").css("visibility", "hidden");

 

Any ideas on how to prevent this "hovering" effect?

 

Cheers

 

[Dimo]

Hi Ron,

The provided code hides a specific icon, but leaves its parent button visible. The correct approach is to hide the parent button.

.....find(".k-i-refresh").parent().css("visibility", "hidden");

Regards,
Dimo
Telerik by Progress

[Felipe]

Thanks, this saved my day

[Summit Insights]

Thanks Dimo, that worked!