This is a migrated thread and some comments may be shown as answers.

Hide/Display an existing Window

6 Answers 1171 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 05 Mar 2014, 04:13 PM
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>

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Mar 2014, 05:02 PM
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!
0
Mike
Top achievements
Rank 1
answered on 05 Mar 2014, 05:08 PM
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.
0
Mike
Top achievements
Rank 1
answered on 05 Mar 2014, 05:46 PM
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?
0
Accepted
Dimo
Telerik team
answered on 06 Mar 2014, 07:43 AM
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!
0
Mike
Top achievements
Rank 1
answered on 06 Mar 2014, 03:49 PM
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!
0
Dimo
Telerik team
answered on 06 Mar 2014, 04:23 PM
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!
Tags
Window
Asked by
Mike
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Mike
Top achievements
Rank 1
Share this question
or