Button doesn't work at document.ready

[Dan]

I have a Kendo().Button on a page that, when clicked, fires a click event to open a Kendo().Window in order to display an alert.  This works fine.  But, if I add a $(document).ready function  to open the window when the document is ready, it does not open the window, and the button does not render properly.

Instead of rendering as a <button> with an <img> property, instead it renders as a plain <button> no image,

Code follows:

​

@{
                            if (@Model.IsClinicalAlert) {
                            @(Html.Kendo().Button()
                                .Name("redalertbutton")
                                .ImageUrl(Url.Content("~/img/patient_alert_red.bmp"))
                                .HtmlAttributes(new { type = "button" })
                                .Events(ev => ev.Click("onAlertClick")))
                            } else {
                                @(Html.Kendo().Button()
                                .Name("greenalertbutton")
                                .ImageUrl(Url.Content("~/img/patient_alert_green.bmp"))
                                .HtmlAttributes(new { type = "button" })
                                .Events(ev => ev.Click("onAlertClick")))
                            }
                            }

<script>
    $(document).ready(function () {
        if ($@Model.IsClinicalAlert) {
            alert(@Model.ClinicalAlert);
            var wdw = $("#alertWindow").data("kendoWindow");
            wdw.open();
        }
    });

    function onAlertClick(e) {
        var wdw = $("#alertWindow").data("kendoWindow");
        wdw.open();
    }
</script>
@(Html.Kendo().Window()
    .Name("alertWindow")
    .Title("Clinical Alert")
    .Content(@<text><strong>@Model.ClinicalAlert</strong></text>)
    .Draggable()
    .Resizable()
    .Width(400)
    .Modal(true)
    .Visible(false)
    .Position(settings => settings.Top(150).Left(250)))

[Dimiter Madjarov]

Hello Dan,


The reason for the window issue is that the open method is called before the window is initialized. You should move the <script> tag contents after the window initialization code.

As for the Button widget issue, I am not exactly sure what is causing it. I would suggest you to check the developer tools console of your browser for any JavaScript errors, as they are the most common reason for initialization problems.

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

 

 

[Dan]

Even better, I got rid of the $(document).ready function.  Instead, I controlled whether the window was to open on page load by setting the Visible parameter of the window to .Visible(@Model.IsClinicalAlert).  If IsClinicalAlert is true, then the window pops up on page load, otherwise not.  That was what I was trying to achieve.
Thanks for your reply.
Dan

[Dimiter Madjarov]

Hi Dan,


I am glad that the issue is resolved. Do not hesitate to contact us again if you experience further Kendo UI related problems.

Regards,
Dimiter Madjarov
Telerik