kendo window opens up on pageload

[Marc Plaxton-Harrison]

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

 

[Eduardo Serra]

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

[Marc Plaxton-Harrison]

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

 

[Ianko]

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: 

• Having the Kendo Window initialized intiialiy: 
  • With jQuery.click: http://dojo.telerik.com/eQiDA
  • With onclick attribute: http://dojo.telerik.com/UQico
• Initializing Kendo Window on click:

• With jQuery.click: http://dojo.telerik.com/Oboze
• With onclick attribute: http://dojo.telerik.com/EkolaD

 

I hope that helps with the case you have.

Regards,
Ianko
Telerik by Progress

[Edgar]

I know this is an old post, but this is what I just did cause was having the same issue. 

  @Html.Kendo().Button().Name("showpending").Rounded(Rounded.Small).Content("View Pending Approvals...").Icon("check").HtmlAttributes(new
   {
       @class = "k-button hide-on-narrow"
   })

@(Html.Kendo().Window()
        .Name("window") // The name of the Window is mandatory. It specifies the "id" attribute of the widget.
        .Title("Pending Approvals") // Set the title of the Window.
        .Content("Loading info...")
        .LoadContentFrom("Pending", "Approvals",new {id = ViewBag.orderId }) //Define the Action and Controller names.
        .Draggable()
        .Width(1300)
        .Visible(false)
    .Events(ev => ev.Close("onClose"))
    )

<script>
    function onClose() {
        $("#showpending").show();
    }

    $(document).ready( function() {
        $("#showpending").bind("click", function () {
            $("#window").data("kendoWindow").center();
            $("#window").data("kendoWindow").open();
            $("#undo").hide();
        });
        $("#window").data("kendoWindow").close();
        $("#window").data("kendoWindow").visible(true);
    });
</script>

 

Hope this helps!

Ed

            

[Yanislav]

Hello Edgar,

Thank you for sharing the solution you've found with the community. It will surely help someone who is working on a similar to your scenario.