Hide/Display an existing Window

7 posts, 1 answers
  1. Mike
    Mike avatar
    8 posts
    Member since:
    Dec 2011

    Posted 05 Mar 2014 Link to this post

    Upon loading, the windows are there but hidden by default.

    I thought I had it where a click of the button would toggle the window (hide/show), but it was only creating another instance.

    What am I missing?

        <div class="k-widget k-tabstrip k-header">
            @* Window buttons. *@
            <table style="width:100%">
                <tr style="text-align:center">
                    <td><button id="inProgressBtn" class="k-button">Work in Progress</button></td>
                    <td><button id="agingBtn" class="k-button">Aging</button></td>
                    <td><button id="recentBtn" class="k-button">Most Recent</button></td>
                    <td><button id="miscBtn" class="k-button">Miscellaneous</button></td>
                    <td><button id="allBtn" class="k-button">All Matters</button></td>
                </tr>
            </table>
        </div>
     
        @* Billable Work In Progress window. *@
        <div id="inProgressDiv">
            @(Html.Kendo.Window _
            .Name("inProgressCWindow") _
            .Title("Billable Work in Process") _
            .Content(Html.Partial("_InProgressStatus", Model).ToHtmlString()) _
            .Draggable _
            .Width(300) _
            .Visible(False) _
            .Actions(Function(actions) actions.Close)
           )
        </div>
     
        @* Aging window. *@
        <div id="agingDiv">
            @(Html.Kendo.Window _
            .Name("agingCWindow") _
            .Title("Accounts Receivable Aging") _
            .Content(Html.Partial("_AgingStatus", Model).ToHtmlString()) _
            .Draggable _
            .Width(300) _
            .Visible(True) _
            .Actions(Function(actions) actions.Close)
           )
        </div>
     
        @* Most recent window. *@
        <div id="recentDiv">
            @(Html.Kendo.Window _
            .Name("recentCWindow") _
            .Title("Most Recent") _
            .Content(Html.Partial("_RecentStatus", Model).ToHtmlString()) _
            .Draggable _
            .Width(400) _
            .Visible(False) _
            .Actions(Function(actions) actions.Close)
           )
        </div>
     
        @* Miscellaneous window. *@
        <div id="miscDiv">
            @(Html.Kendo.Window _
            .Name("miscCWindow") _
            .Title("Miscellaneous") _
            .Content(Html.Partial("_MiscClientStatus", Model).ToHtmlString()) _
            .Draggable _
            .Width(300) _
            .Visible(False) _
            .Actions(Function(actions) actions.Close)
           )
        </div>
     
        @* All window. *@
        <div id="allDiv">
            @(Html.Kendo.Window _
            .Name("allCWindow") _
            .Title("All Client") _
            .Content(Html.Partial("_AllClientStatus", Model).ToHtmlString()) _
            .Draggable _
            .Visible(False) _
            .Actions(Function(actions) actions.Close)
           )
        </div>
    </div>
     
    @* Scripts. *@
    <script>
        //Window functions.
        $(document).ready(function () {
            //Windows.
            var inProgressCWindow = $("#inProgressCWindow");
            var agingCWindow = $("#agingCWindow");
            var recentCWindow = $("#recentCWindow");
            var miscCWindow = $("#miscCWindow");
            var allCWindow = $("#allCWindow");
            $("#inProgressBtn").click(function (e) {
                //Close windows.
                agingCWindow.data("kendoWindow").close();
                recentCWindow.data("kendoWindow").close();
                miscCWindow.data("kendoWindow").close();
                allCWindow.data("kendoWindow").close();
                //Toggle.
                if (inProgressCWindow.data("kendoWindow").element.is(":hidden")) {
                    inProgressCWindow.data("kendoWindow").center();
                    inProgressCWindow.data("kendoWindow").open();
                }
                else {
                    inProgressCWindow.data("kendoWindow").close();
                };
            });
            //Open aging window.
            $("#agingBtn").click(function (e) {
                //Close windows.
                inProgressCWindow.data("kendoWindow").close();
                recentCWindow.data("kendoWindow").close();
                miscCWindow.data("kendoWindow").close();
                allCWindow.data("kendoWindow").close();
                //Toggle.
                if (agingCWindow.data("kendoWindow").element.is(":hidden")) {
                    agingCWindow.data("kendoWindow").center();
                    agingCWindow.data("kendoWindow").open();
                }
                else {
                    agingCWindow.data("kendoWindow").close();
                };
            });
            //Open recent window.
            $("#recentBtn").click(function (e) {
                //Close windows.
                inProgressCWindow.data("kendoWindow").close();
                agingCWindow.data("kendoWindow").close();
                miscCWindow.data("kendoWindow").close();
                allCWindow.data("kendoWindow").close();
                //Toggle.
                if (recentCWindow.data("kendoWindow").element.is(":hidden")) {
                    recentCWindow.data("kendoWindow").center();
                    recentCWindow.data("kendoWindow").open();
                }
                else {
                    recentCWindow.data("kendoWindow").close();
                };
            });
            //Open misc. window.
            $("#miscBtn").click(function (e) {
                //Close windows.
                inProgressCWindow.data("kendoWindow").close();
                agingCWindow.data("kendoWindow").close();
                recentCWindow.data("kendoWindow").close();
                allCWindow.data("kendoWindow").close();
                //Toggle.
                if (miscCWindow.data("kendoWindow").element.is(":hidden")) {
                    miscCWindow.data("kendoWindow").center();
                    miscCWindow.data("kendoWindow").open();
                }
                else {
                    miscCWindow.data("kendoWindow").close();
                };
            });
            //Open all windows.
            $("#allBtn").click(function (e) {
                //Close windows.
                inProgressCWindow.data("kendoWindow").close();
                agingCWindow.data("kendoWindow").close();
                recentCWindow.data("kendoWindow").close();
                miscCWindow.data("kendoWindow").close();
                //Toggle.
                if (allCWindow.data("kendoWindow").element.is(":hidden")) {
                    allCWindow.data("kendoWindow").center();
                    allCWindow.data("kendoWindow").open();
                }
                else {
                    allCWindow.data("kendoWindow").close();
                };
            });
        });
    </script>

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 05 Mar 2014 Link to this post

    Hi Mike,

    Checking the Window element visibility is not reliable, because of the animations, which take some time and during that time the Window is closing, but is still visible. Please use this boolean flag:

    $("#WindowID").data("kendoWindow").options.visible

    Otherwise I don't see how new Window instances could be created by your code, as it does not include kendoWindow() methods.

    Let me know if you need more information.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mike
    Mike avatar
    8 posts
    Member since:
    Dec 2011

    Posted 05 Mar 2014 in reply to Dimo Link to this post

    Dimo,
    I appreciate that tidbit.

    Here's a smaller sample.

        <div class="k-widget k-tabstrip k-header">
            @* Window buttons. *@
            <table style="width:100%">
                <tr style="text-align:center">
                    <td><button id="agingBtn" class="k-button">Aging</button></td>
                </tr>
            </table>
        </div>
     
        @* Aging window. *@
        <div id="agingDiv">
            @(Html.Kendo.Window _
            .Name("agingCWindow") _
            .Title("Accounts Receivable Aging") _
            .Content(Html.Partial("_AgingStatus", Model).ToHtmlString()) _
            .Draggable _
            .Width(300) _
            .Visible(True) _
            .Actions(Function(actions) actions.Close)
           )
        </div>
     
    @* Scripts. *@
    <script>
        //Window functions.
               //Aging window.
            $("#agingBtn").click(function (e) {
                var win = $("#agingCWindow").data("kendoWindow");
                win.close();
            });


    The kendoWindow is already display, but when I click the button the my script doesn't recognized the existing window.  If I change it to open, I'll get a new window.
  5. Mike
    Mike avatar
    8 posts
    Member since:
    Dec 2011

    Posted 05 Mar 2014 in reply to Mike Link to this post

    I think I'm understanding what the issue may be.

    This code is in a partial view.

    @* Model. *@
    @Modeltype Venable.KMVC.ClientPortfolio.ADRServiceReference.StatusDetails
     
    @* Status tab results. *@
    <div id="statusResult">
      
     
        @* Aging window. *@
        <div id="agingDiv">
            @(Html.Kendo.Window _
            .Name("testWindow") _
            .Title("Accounts Receivable Aging") _
            .Content("Test") _
            .Draggable _
            .Width(300) _
            .Visible(True) _
            .Actions(Function(actions) actions.Close)
           )
        </div>
     
       
        <button id="openBtn" class="k-button">Open</button>
        <button id="closeBtn" class="k-button">Close</button>
     
    </div>
     
    @* Scripts. *@
    <script>
        $("#openBtn").click(function (e) {
            var win = $("#testWindow").data("kendoWindow");
            win.open();
        });
        $("#closeBtn").click(function (e) {
            var win = $("#testWindow").data("kendoWindow");
            win.close();
        });
    </script>


    Should my scripting be hosted on the main view?
  6. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Mar 2014 Link to this post

    Hello Mike,

    There is no need to move Javascript code from the partial view to the main page.

    Do you by any chance load the partial view more than once? If this happens, you will end up with multiple Window instances on the page with the same ID, which is an invalid scenario. Or does the partial views load a new jQuery instance and Kendo UI scripts by mistake? Loading such scripts twice will delete all current Kendo UI widget instances on the page.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Mike
    Mike avatar
    8 posts
    Member since:
    Dec 2011

    Posted 06 Mar 2014 in reply to Dimo Link to this post

    It was loading the partial view upon initialization.  When I actually went to the tab, it loads it again.

    I was able to set a condition if the model was null to not load the partial view and it worked as intended.

    Is there a best practice for this sort of thing?  I'll have to explore that.

    Thanks!
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Mar 2014 Link to this post

    Hi Mike,

    For consulting related to development best practices, please contact our Services department.

    http://www.telerik.com/services/overview.aspx

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready