New to Telerik UI for ASP.NET Core? Download free 30-day trial

Tag Helper

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        tag_helper.cshtml
                    
                        Tag_HelperController.cs

kendo.syncReady(function(){jQuery("#notification").kendoNotification({"autoHideAfter":0,"position":{"pinned":true,"right":30,"top":30},"templates":[{"type":"info","template":jQuery('#emailTemplate').html()},{"type":"error","template":jQuery('#errorTemplate').html()},{"type":"success","template":jQuery('#successTemplate').html()}],"stacking":"down","animation":{"close":{"duration":0},"open":{"duration":500}}});});

Show notification:

Hide notification:

<div class="new-mail"> <img src="/aspnet-core/shared/web/notification/envelope.png" /> <h3>#= title #</h3> <p>#= message #</p> </div> <div class="wrong-pass"> <img src="/aspnet-core/shared/web/notification/error-icon.png" /> <h3>#= title #</h3> <p>#= message #</p> </div> <div class="upload-success"> <img src="/aspnet-core/shared/web/notification/success-icon.png" /> <h3>#= message #</h3> </div> $(document).on("kendoReady", function () { var notification = $("#notification").data("kendoNotification"); $("#showEmailNotification").click(function () { notification.show({ title: "New E-mail", message: "You have 1 new mail message!" }, "info"); }); $("#showErrorNotification").click(function () { notification.show({ title: "Wrong Password", message: "Please enter your password again." }, "error"); }); $("#showSuccessNotification").click(function () { notification.show({ message: "Upload Successful" }, "success"); }); $("#hideAllNotifications").click(function () { notification.hide(); }); }); .demo-section p { margin: 3px 0 20px; line-height: 40px; } .demo-section .k-button { width: 200px; } /* Notifications */ .k-notification h3 { padding: 30px 10px 5px; font-size: 1em; line-height: normal; } .k-notification img { margin: 20px; float: left; } /* Info template */ .new-mail { width: 300px; height: 100px; } /* Error template */ .wrong-pass { width: 300px; height: 100px; } /* Success template */ .upload-success { width: 300px; height: 100px; }

Tag Helper

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo