.show erroring

2 posts, 0 answers
  1. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 01 Feb Link to this post

    Hi, I have been receiving the error  "0x800a138f - JavaScript runtime error: Unable to get property 'show' of undefined or null reference". I've looked over my code and examined my javascript function, but I have been unable to find any errors. Why would the .show error out on me?


    My Code looks as follows:

    @(Html.Kendo().Notification()
        .Name("#popupNotification")
        .Width("100%")
        .Position(p => p.Pinned(true).Top(30).Right(30))
        .Stacking(NotificationStackingSettings.Down)
        .AutoHideAfter(7000)
        .Templates(t =>
                {
                   t.Add().Type("info").ClientTemplateID("popupTemplate");
                })
    )

    <button id="showNotification" class="k-button">Notification</button><br />

     

    <script id="popupTemplate" type="text/x-kendo-template">
        <div class="">
            <h3>#= title #</h3>
            <p>#= message #</p>
        </div>
    </script>

    <script>
        $(document).ready(function() {
            var popupNotification = $("#popupNotification").data("kendoNotification");

            $("#showNotification").click(function() {
                popupNotification.show ({
                    title: "New Notification",
                    message: "Test"
                }, "info");
            });
        });
    </script>

  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 04 Feb Link to this post

    Hi,

    It looks like the Name property of the Notification control contains a special character (#) which is not a supported scenario. Here is the modified markup that works as expected on my end:

    @(Html.Kendo().Notification()
        .Name("popupNotification")
        .Width("100%")
        .Position(p => p.Pinned(true).Top(30).Right(30))
        .Stacking(NotificationStackingSettings.Down)
        .AutoHideAfter(7000)
        .Templates(t =>
                {
                    t.Add().Type("info").ClientTemplateID("popupTemplate");
                })
    )
     
    <button id="showNotification" class="k-button">Notification</button><br />
     
     
     
    <script id="popupTemplate" type="text/x-kendo-template">
        <div class="">
            <h3>#= title #</h3>
            <p>#= message #</p>
        </div>
    </script>
     
    <script>
        $(document).ready(function() {
            var popupNotification = $("#popupNotification").data("kendoNotification");
            $("#showNotification").click(function() {
                popupNotification.show ({
                    title: "New Notification",
                    message: "Test"
                }, "info");
            });
        });
    </script>

    I hope that helps.

    Regards,
    Misho
    Telerik
    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
Back to Top