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

[ipgmr]

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

[ipgmr]

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 () {
                  ...
          }

[Dimo]

Hello Gregory,

The described scenario should work. Here is an example:

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

Regards,
Dimo
Telerik

[ipgmr]

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

[Dimo]

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