Hide close icon on window

14 posts, 1 answers
  1. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 27 Jun 2012 Link to this post

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

    Thank you,
    Donna
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 28 Jun 2012 Link to this post

    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>
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 03 Jul 2012 Link to this post

    Yes, that worked.  Thank you!
  7. Atanu
    Atanu avatar
    40 posts
    Member since:
    Jan 2012

    Posted 15 Nov 2012 Link to this post

    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
  8. Evan
    Evan avatar
    3 posts
    Member since:
    Oct 2012

    Posted 20 Nov 2012 Link to this post

    $("#MyPopup").parent().find(".k-window-action").css("visibility", "hidden");
  9. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 06 Jun 2013 Link to this post

    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");
  10. Evan
    Evan avatar
    3 posts
    Member since:
    Oct 2012

    Posted 06 Jun 2013 Link to this post

    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/
  11. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 06 Jun 2013 Link to this post

    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");

  12. Sreejith
    Sreejith avatar
    4 posts
    Member since:
    Jan 2013

    Posted 13 Apr Link to this post

    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

  13. Ron
    Ron avatar
    11 posts
    Member since:
    Mar 2014

    Posted 05 Jul Link to this post

    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

     

  14. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 Jul Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. Ron
    Ron avatar
    11 posts
    Member since:
    Mar 2014

    Posted 06 Jul in reply to Dimo Link to this post

    Thanks Dimo, that worked!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready