Button doesn't work at document.ready

4 posts, 0 answers
  1. Dan
    Dan avatar
    202 posts
    Member since:
    May 2006

    Posted 05 May 2014 Link to this post

    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)))
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dan
    Dan avatar
    202 posts
    Member since:
    May 2006

    Posted 06 May 2014 in reply to Dimiter Madjarov Link to this post

    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
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 May 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready