This is a migrated thread and some comments may be shown as answers.

Button doesn't work at document.ready

3 Answers 151 Views
Button
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 2
Dan asked on 05 May 2014, 06:12 PM
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)))

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 06 May 2014, 01:05 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dan
Top achievements
Rank 2
answered on 06 May 2014, 01:51 PM
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
0
Dimiter Madjarov
Telerik team
answered on 06 May 2014, 01:56 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Button
Asked by
Dan
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Dan
Top achievements
Rank 2
Share this question
or