Problems hiding the window on load.

[Mike]

I cannot figure out how to use the Window in a typical fashion. Basically, I want to define a window, but have it be closed initially. I want to click a link and have the window open. I have tried using the client API to create an open a window using the following, but I get a browser error "Line: 50
Error: '$.telerik.window' is null or not an object".

<a href="#" id="openTelerikWindow">Open Telerik Window</a>

    <script type="text/javascript">

        $("#openTelerikWindow").click(function () {
            var dialog = $.telerik.window.create({
                title: "Success",
                html: "<strong>this is a test...</strong>",
                modal: true,
                resizable: false,
                draggable: true,
                visible: false,
                width: 300,
                height: 100
            })
            .data('tWindow').open();
        });


    </script>

Then I tried using the server side API, thinking I could close the window with the onLoad event handler and I get "Line: 58
Error: 'undefined' is null or not an object" 

        <% Html.Telerik().Window()
        .Name("MyWindow")
        .Title("Window title")
        .Draggable(true).Animation(true).Modal(true).Resizable(r => r.Enabled(true)).Width(500).Height(400)
        .Buttons(b => b.Maximize().Refresh().Close())
        .Content(() =>
        {
        %>;

        This is a test of a power full grid.

        <%
        })
        .ClientEvents(e => e.OnLoad("myWindowOnLoad"))
        .Scrollable(true)
        .Render();
%>

    <script type="text/javascript">

        function myWindowOnLoad() {
            var theWindow = $(this).data('tWindow');
            theWindow.close();
        }

    </script>

All I want to to define a window, have it be closed when the page loads, and use a link to open it. Any advice anyone?

[Carlos]

What about using the .Visible(false) method when declaring the window server-side, and then using the open() client-side function? :)

[Joshua]

Hello I just had this problem also and I tried putting visible(false) before the render and it works at first, but as soon as I open and then close the modal window the js throws an error on f.width is null or not an object. the js file throwing the error is called telerik.window.min.js.

[Philip]

I also want to define a window, but have it be closed initially. I want to click a link and have the window open. I am hoping to see a solution posted on the forum soon.

Thank you.
Philip

[Alex Gyoshev]

Hello,

@Philip: The solution is, like Carlos said, to use the Visible(false) property in the view and show the window by calling its open() client-side method.

@Joshua: It seems that this is a bug -- alas I couldn't reproduce it. Could you please send your window declaration and how you are using it, so that we can fix this for the upcoming release?

Greetings,
Alex Gyoshev
the Telerik team

[Mike]

My bad, I had overlooked the .Visible(false) method call. I had figured that out shortly after submitting the post. That appeared to have resolved my problem. Thanks!

[Philip]

Hi Alex,

Yes, using .Visible(false) prevents the window from opening OnDocumentReady().

I did not understand how to implement your suggestion "showon the window by calling its open() client-side method." because I am new to JQuery.

I used the code in the Telerik Window example but the window opens and then closes immediately when I click the link that triggers the call to open the Telerik window.

    

<a id="undo" href="">Click to open the Telerik Window</a>

 

      <%

            Html.Telerik().Window()

                .Name("MyLovelyWindow")

                .Modal(true)

                .Animation(true)

                .Resizable(resizing => resizing.Enabled(true))

                .Buttons(b => b.Maximize().Close())

                .Content("My window content")

                .Width(800)

                .Height(600)

                .Visible(false)

                .Render();

        %>

   


    <% Html.Telerik().ScriptRegistrar()

           .OnDocumentReady(() =>

           {%>

                $('#undo')

                .bind('click',

                function openWindow(e)

                {

                    $('#MyLovelyWindow').data('tWindow').open();

                    $(this).hide();

                })

                .toggle(!$('#MyLovelyWindow').is(':visible'));

                 

                $('#MyLovelyWindow').bind('close',

                function() { $('#undo').show(); });

    <%}); %>

Any suggestions on how to fix this would be appreciated.

Philip

[Joshua]

I resolved my issue, thank you for your response.

[Donna Stewart]

UPDATE:  I fixed my issue - it was the button causing the postback to the main action.  I changed it to a link (which is really what I wanted anyway) and it works.

 

 

<a href="#" id="popup">Open Telerik Window</a>

 

Leaving the rest in case anyone else has this issue.

Thanks!


I am having the same issue as Phillip.  Any advice is very much appreciated.

I am editting this post as I think I may know some of the issue I am having.  I am using LoadContentFrom and hitting a different action which loads a partial view into the window.  But it seems that Telerik is also doing a post back on the main action, maybe because I am using a button.  I will do more research and testing and will edit again if I come up with the answer.  In the meantime, if anyone has suggestions, I'm all ears.

Here's my code:

<script type="text/javascript">
    $(document).ready(function () {

        $('#popup').bind('click', function openWindow(e)
        { $('#Window').data('tWindow').open(); })
    });

</script>

<div id="publicmaincontent" class="maincontentclass"
     style="background-image:url(<%=Model.mainContentImage%>); background-repeat:no-repeat;">
    <div id="maincontentright">
        <p class="publiccontentheader"><%= Model.mainContentTitle%></p>
        <p class="publiccontenttext"><%= Model.mainContentText%></p>
         <%  If Model.mainContentSubMenuList.Count > 0 Then %>
                <ul id="submenu">
                <% For Each MenuItem In Model.mainContentSubMenuList%>
                    <li><%= Html.ActionLink(MenuItem.Text, "showSubContentPage", "SubContent", New With {.subAction = MenuItem.ActionName}, Nothing)%></li>
                <%  Next %>
                </ul>
         <% End If%>
        <div id="salesReps" class="jqmWindow"></div>
        <button id="popup">Open</button>
        <span id="salespopup">
            <%  Html.Telerik().Window().Name("Window") _
                .LoadContentFrom("salesRepresentatives", "Home") _
                .Buttons(Function(buttons) buttons.Refresh().Maximize().Close()) _
                .Draggable(True) _
                .Height(350) _
                .Width(450) _
                .Resizable() _
                .Visible(False) _
                .Title("Find Your Sales Representative") _
                .Render()
             %>
        </span>
    </div>
</div>

Thank you,
Donna

[Alex Gyoshev]

Hello all,

@Philip:
> I did not understand how to implement your suggestion "show the window by calling its open() client-side method." because I am new to JQuery.
The $('#MyLovelyWindow').data('tWindow').open(); line does that - it gets the DOM object ($('#MyLovelyWindow')), then it gets the client-side object of the window (.data('tWindow')) and calls its open() method.

Your page makes a "post back" (i.e. navigates) because the #undo link is being clicked. The empty href attribute means that clicking it will reload the current page. You can either (a) set the href to a hash (#) or (b) call e.preventDefault in the click handler (openWindow), so that the navigation won't happen. I recommend doing both.

@Donna, Joshua - I am glad that you were able to fix the issues.

Sincerely yours,
Alex Gyoshev
the Telerik team

[Philip]

Hi Alex,

Thank you for the explanation and suggested changes! They resolved my issue.  The Window now opens as expected. 

I included the corrected code in case someone else has the same issue.

Regards,
Philip Quarles

-------------------------------------------------

<a id="undo" href="#">Click to open the Telerik Window</a>

  <%
            Html.Telerik().Window()
                .Name("MyLovelyWindow")
                .Modal(true)
                .Animation(true)
                .Resizable(resizing => resizing.Enabled(true))
                .Buttons(b => b.Maximize().Close())
                .Content("My window content")
                .Width(800)
                .Height(600)
                .Visible(false)
                .Render();
        %>

 <% Html.Telerik().ScriptRegistrar()
           .OnDocumentReady(() =>
           {%>
                $('#undo')
                .bind('click',
                function openWindow(e)
                {
                    $(e.preventDefault());
                    $('#MyLovelyWindow').data('tWindow').open();
                    $(this).hide();
                })
                .toggle(!$('#MyLovelyWindow').is(':visible'));

                $('#MyLovelyWindow').bind('close',
                function() { $('#undo').show(); });
    <%}); %>