kendo window opens up on pageload

4 posts, 0 answers
  1. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 21 Sep Link to this post

    Hi guys,

    i have been trying to use kendo window to pop up when ever a user enters wrong credentials. But when the page load for the first time it pop ups.

    I tryed to change the visibility to "false" and to "true". when visibility is set to false, the window does not show any more. when visibility is set to true, the dialog window shows when the page loads for the first time.

    Here is the code that im using below...

    <script>
        $(document).ready(function () {
            var myWindow = $("#Popdiv"),
                undo = $("#submit");
     
            undo.click(function (e) {
            //    e.preventDefault();
            });
     
            $("#okayButton").kendoButton({
                click: function (e) {
                    myWindow.data("kendoWindow").close();
                }
            });
     
            //$("#submit").click(function () {
            //       ValidateUsertwo();
            //  });
     
            function onClose() {
                undo.fadeIn();
            }
     
            myWindow.kendoWindow({
                width: 600,
                title: "Error",
                modal: true,
                iframe: true,
                actions: [
                    'Pin',
                    'Close',
                    'Refresh'
                ],
                close: onClose,
               visible: true
            }).data("kendoWindow").center();
     
          
        });
     
        function ValidateUsertwo() {
            var ID = document.getElementById('<%:Html.IdFor(t => t.UserName) %>').value;
            var pass = document.getElementById('<%:Html.IdFor(t => t.Password) %>').value;
     
            if (ID == "") {
                myWindow.data("kendoWindow").open();
                return false;
            }
     
            if (pass == "") {
                 
                return false;
            }
            if ('@TempData["msg"]' != "") {
                myWindow.data("kendoWindow").open();
                }
            }
        
        //$("#button").on("click", function (e) {
        //    mywin.data("kendoWindow").close();
        //});
       
     
    </script>

    help will be appreciated

    thanks

     

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    51 posts

    Posted 21 Sep Link to this post

    Hello Marc,

    The following section of your code initializes and opens the window:

    myWindow.kendoWindow({
                width: 600,
                title: "Error",
                modal: true,
                iframe: true,
                actions: [
                    'Pin',
                    'Close',
                    'Refresh'
                ],
                close: onClose,
               visible: true
            }).data("kendoWindow").center();

    Notice that it is located in the ready function of the document which means that every time the page loads it will open the window. If you want to show it only when the credentials fail then you must move that section of the code to a function that gets executed when the credentials fail.

    I hope this helps!

    Regards,
    Eduardo Serra
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 23 Sep Link to this post

    Hi Eduardo,

    i removed the window from the document ready function,

    but for some reason it does not pop up when its outside the document ready function.

    I have a function that Im calling when a login button is clicked. I wired a function called "ValidateUsertwo()" see below

    <input type="submit" onclick="return ValidateUsertwo();" class="btn btn-info" value="Log in" />

    then on my javascript

    <script>
        $("#submit").click(function () {
            var wnd = $("#Popdiv").data("kendoWindow");
            if (!wnd) {
                wnd = $("#Popdiv").kendoWindow({
                    title: "Error",
                    actions: ["Close"],
                    content: direction,
                    width: "800px",
                    height: "600px",
                    visible: false,
                    draggable: false,
                    resizable: false,
                    modal: true
                }).data("kendoWindow");
            }
            wnd.center();
            wnd.open();
            //   ValidateUsertwo();
          });
     
      
         
     
        function ValidateUsertwo() {
            var ID = document.getElementById('<%:Html.IdFor(t => t.UserName) %>').value;
            var pass = document.getElementById('<%:Html.IdFor(t => t.Password) %>').value;
     
            
     
            if (ID == "") {
                myWindow.data("kendoWindow").open();
                
                return false;
            }
     
            if (pass == "") {
                myWindow.data("kendoWindow").open();
                return false;
            }
            if ('@TempData["msg"]' != "") {
                myWindow.data("kendoWindow").open();
                
            }
        }

    But for some reason the pop up does not show, Im i missing something here?

    help will be appreciated

    thanks

     

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 27 Sep Link to this post

    Hello Marc,

    The  reason for the Kendo Window to open on page load is the visible property set to true. That is an expected behavior no matter if the widget is initialized during $(document).ready() or not. You can check out this here: http://docs.telerik.com/kendo-ui/api/javascript/ui/window#configuration-visible

    If you do not need the dialog to be opened initially, it is correct to set the visible property to false.

    However, the reason for this not to work is most probably due to issues with the way the Kendo Window is opened or initialized.

    In the code pasted below the issue is that there are two click handlers: One handled via the onclick attribute and second via the jQuery.click() method. The first handler (ValidateUsertwo()) should open Kendo Window, but such does not exists as it is not initialized. Further, not that the attribute is assigned with a return statement. But the ValidateUsertwo() method never returns true. This cancels the click event and prevents further handlers to be executed. This prevents the handler assigned with the jQuery.click() method to be called. Finally, with the code shown, Kendo Window widget is never initialized. 

    On a side note, the submit button has no id assigned, therefore the $("#submit") should return an empty jQuery object. Which is another possible reason for the Kendo Window not being initialized. 

    Basically, to resolve the situation you have you should make sure that Kendo Window is actually initialized. I suggest you having the visible set to false and debug the code implemented to find the reason for the widget not being initialized  and opened. 

    Typically, there are to simple ways to achieve that: 

       

    I hope that helps with the case you have.

    Regards,
    Ianko
    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready