This is a migrated thread and some comments may be shown as answers.
.show erroring
1 Answer 59 Views
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 01 Feb 2016, 05:37 PM

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>

1 Answer, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 04 Feb 2016, 09:09 AM
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
Asked by
Justin
Top achievements
Rank 1
Answers by
Misho
Telerik team
Share this question
or