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

Linking off of notifications

1 Answer 19 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 23 Feb 2021, 01:55 PM

Hello,

I'm doing some research on behalf of my team and have been looking for documentation that discusses linking functionality from notification pop-ups. This may be an easy thing to do but I am not a programmer (sorry!).  Can anyone confirm that it is possible to embed links in the notifications? 

For example: Worker A completes work that automatically is assigned to Worker B.  When Worker A completes their work the system auto-generates a notification to Worker B letting them know work has been assigned to them.  Worker B can either hit the X to dismiss or click the body of the notification to link them to the application page that requires their attention. 

Any help on this is much appreciated!

Cheers

1 Answer, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 26 Feb 2021, 01:47 PM

Hi, Paul,
Thank you for your question.

It is indeed possible to embed links in the Notification Widget. You can view this Dojo that showcases the functionality. Please note that for the Notification link page to load successfully in the Dojo you have to toggle Full screen from the button in the top-right.

The above example is achieved by utilizing Kendo Templates and Kendo UI's integrated icons. The following guide recreates the above:

  1. define the DOM element that initializes the Notification and the button that triggers it.
        <span id="notification"></span>
        <button class="k-button" style="margin-bottom:5px;" onclick="showInfo()">Click me for notification</button>
  2. initialize the Notification and configure its properties
    var notification = notificationElement.kendoNotification({
            width:"150px",
            autoHideAfter:0,
            hideOnClick:false,
    ...
  3. configure the templates property of the Notification
    • set the type 'info' of the Notification template
    • set the custom content of the Notification's template
    • a span with the i icon
    • the anchor tag that redirects to another URL
    • the variable containing custom text
    • the x icon that hides the Notification
      templates: [{
                type: "info",
                template: "<div class='info'><span class='k-icon k-i-info' ></span> 
       <a  href='https://google.com'>#= myMessage #</a>
      <span id='close' class='k-icon k-i-close'></span></div>"
              }]
      });
  4. define the function that shows the Notification on button click
    function showInfo (){
            nData.info({
              myMessage:"I redirect to Google"
    });   
  5. handle the click event of the x icon that hides the Widget
    $(document).on("click", "#close", function(){					
              nData.hide();
    });
  6. (optional)style the anchor tag

Hopefully the above fits your requirement.  

Regards,
Stoyan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Notification
Asked by
Paul
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Share this question
or