Kendo Notification with an embedded link in message to a javascript function

5 posts, 0 answers
  1. ipgmr
    ipgmr avatar
    10 posts
    Member since:
    Aug 2007

    Posted 02 Mar 2015 Link to this post

    I am trying to implement a kendo notification that has a hyperlink in the message, like this: 'Your file is Ready' where the word 'Ready' is a hyperlink.  The trick is I need the hyperlink to call a javascript function.

    In my message I am trying variations of this:
    <a href='' ng-click='notificationLinkClicked()'>Ready</a>

    I cannot seem to find a way to make that javascript function visible from within the clicking on the link within the notification.

    Anyone know if this is possible or better yet have an example of how to do this?

    Thanks in advance,
    Gregory
  2. ipgmr
    ipgmr avatar
    10 posts
    Member since:
    Aug 2007

    Posted 03 Mar 2015 in reply to ipgmr Link to this post

    Actually, it seems that if I put anything in the message other than straight text I get the angular error message in my console:

    TypeError: Function expected
    at Anonymous function (http://localhost:48716/Scripts/angular.js:14014:11)
    at completeOutstandingRequest (http://localhost:48716/Scripts/angular.js:4300:7)
    at Anonymous function (http://localhost:48716/Scripts/angular.js:4601:7)

             if (args.msgNeedsLink !== undefined && args.msgNeedsLink) {
                /// These produce the above error
                //var message = args.message + "<button ng-click='processLinkClicked()'>" + args.linkText + "</button>";
                var message = args.message + "<a href='' ng-click='processLinkClicked()'>" + args.linkText + "</a>";
                $scope.notification.show(message);
             }
             else {
                /// This works fine
                $scope.notification.show(args.message);
             }

             $scope.processLinkClicked = function () {
                      ...
              }
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 04 Mar 2015 Link to this post

    Hello Gregory,

    The described scenario should work. Here is an example:

    http://dojo.telerik.com/@dimodi/EcezA

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. ipgmr
    ipgmr avatar
    10 posts
    Member since:
    Aug 2007

    Posted 10 Mar 2015 Link to this post

    Hi Dimo,
    Thank you for the example.  I see that it does exactly what I am trying to accomplish -- when running within the dojo.  However, when I put my kendo-notification in my index.html, so it can be reused by every page in my web app it no longer recognizes my processLinkClicked function.  No error, but not hitting my breakpoint within my function either.

    I was trying to implement your scenario in jsFiddle, but it does not like external resources against non https URLs.

    So in my index.html:
            <div ng-controller="myController" kendo-notification="notification"></div>
        <style>
            .fsnotification-success {
                color: #507f50;
                border-color: #d0dfd0;
                background-color: #f0fff0;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
                padding: .6em .5em;
                cursor: default;
                position: relative;
                white-space: nowrap;
            }

            .fsnotification-info {
                color: #50607f;
                border-color: #d0d9df;
                background-color: #f0f9ff;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
                padding: .6em .5em;
                cursor: default;
                position: relative;
                white-space: nowrap;
            }
        </style>
    In myController.js:
          $scope.$on("DISPLAY_NOTIFICATION", function (event, args) {
             $scope.notification.setOptions({
                autoHideAfter: args.autoHideAfter,
                hideOnClick: args.hideOnClick,
                stacking: "up",
                templates: [{
                   type: "fslink",
                   template: "<div class='fsnotification-info'>#= message #<a onclick=\'processNotificationClick(#= linkpath #);'\>#= linktext #</a></div>"
                }, {
                   type: "fssuccess",
                   template: "<div class='fsnotification-success'>#= message #</div>"
                }]
             });

             if (args.msgNeedsLink !== undefined && args.msgNeedsLink) {
                $scope.notification.show({
                   message: args.message,
                   linktext: args.linkText,
                   linkpath: args.linkPath
                }, "fslink");
             }
             else {
                $scope.notification.show({
                   message: args.message
                }, "fssuccess");
             }
          });

          $scope.processNotificationClick = function (path) {
             mySvc.openPDF(path);
          }

    Thank you,
    Gregory




  6. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 12 Mar 2015 Link to this post

    Hello Gregory,

    The provided code reveals that you are trying to attach a click handler with a standard onclick="" HTML attribute, which points to a method from the Angular scope. This will not work.

    Please use the implementation shown in my example, or change the onclick attribute to point to a function in the global Javascript scope.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready