This is a migrated thread and some comments may be shown as answers.
Problems hiding the window on load.
10 Answers 205 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Mike
Top achievements
Rank 2
Mike asked on 19 Aug 2010, 06:41 PM

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?

10 Answers, 1 is accepted

Sort by
0
Carlos
Top achievements
Rank 1
answered on 20 Aug 2010, 12:03 PM
What about using the .Visible(false) method when declaring the window server-side, and then using the open() client-side function? :)
0
Joshua
Top achievements
Rank 1
answered on 20 Aug 2010, 04:16 PM
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.
0
Philip
Top achievements
Rank 1
answered on 20 Aug 2010, 04:52 PM
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
0
Alex Gyoshev
Telerik team
answered on 23 Aug 2010, 07:43 AM
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
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 Public Issue Tracking system and vote to affect the priority of the items
0
Mike
Top achievements
Rank 2
answered on 23 Aug 2010, 03:54 PM
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!
0
Philip
Top achievements
Rank 1
answered on 23 Aug 2010, 09:29 PM
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
0
Joshua
Top achievements
Rank 1
answered on 24 Aug 2010, 04:40 AM
I resolved my issue, thank you for your response.
0
Donna Stewart
Top achievements
Rank 1
answered on 24 Aug 2010, 08:08 PM
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
0
Alex Gyoshev
Telerik team
answered on 25 Aug 2010, 07:58 AM
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
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 Public Issue Tracking system and vote to affect the priority of the items
0
Philip
Top achievements
Rank 1
answered on 25 Aug 2010, 09:32 PM
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(); });
    <%}); %>

Tags
Window
Asked by
Mike
Top achievements
Rank 2
Answers by
Carlos
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Philip
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Mike
Top achievements
Rank 2
Donna Stewart
Top achievements
Rank 1
Share this question
or