Grid With Custom Button

Posted by jts-law on 21-Sep-2017 09:42

All,

I'm trying to add a custom button to a grid and I'm having trouble getting the function/method to run.  I've tried a few ways with different results (none successful).  The grid is setup within KUIB.

1. Add button using template.  This way generates an error "Uncaught ReferenceError: resequence is not defined":
[ Inside $watch for grid ]
grid.options.toolbar.push(
   { name: "resequence",
     template: "<button class='k-button' id='resequence' onClick='return resequence()'>Resequence</button>",
   });
2. Add button using "click" property. This way causes 4 state changes to default.module.application.home followed by 3 "Error: transition superseded" exceptions.
[ Inside $watch for grid ]
grid.options.toolbar.push(
   { name: "resequence",
     text: "Resequence",
     click: (e) => { return this.resequence(e); },
   });
3. Add button with no event, then find button and bind to onClick.  This way also causes 4 state changes to default.module.application.home followed by 3 "Error: transition superseded" exceptions.
[ Inside $watch for grid ]
grid.options.toolbar.push(
   { name: "resequence",
     text: "Resequence",
   });
let removeBtnReseqWatch = $scope.$watch(() => {
   return angular.element("#gridTotals > div.k-grid-toolbar > a.k-button.k-grid-resequence");
}, (btn) => {
   if (btn && btn.length >= 1) {
      btn.bind("onClick", (e) => {
         this.resequence(e);
      });
      removeBtnReseqWatch();
   }
});

How do we add custom buttons to an existing grid in KUIB 2?
Louis

Kendo UI Builder - Forum
Posted by egarcia on 21-Sep-2017 11:40

Hello Louis,

I also see error "Error: transition superseded". My guess is that it is related to the button being a hyperlink. It should work though.

See www.telerik.com/.../custom-toolbar-button-with-angularjs

We should report the errors to technical support so that the issue can be investigated.

I also tried to use k-options but I got error again.

I found the following approach to work.

In your constructor (I am assuming a custom view), you can run the following code:

this.$components.grid0.options.toolbar.push({

name: "resequence",

template: "<button class='k-button' id='resequence'>Resequence</button>"

});

cancelWatch = $scope.$watch(function () {

var element = angular.element("#resequence");

if (element.html()) {

return element;

} else {

return undefined;

}

}, function (element, oldValue) {

if (element) {

element[0].onclick = function() { console.log("DEBUG:"); };

cancelWatch();

}

});

I hope this helps,

Edsel

All Replies

Posted by egarcia on 21-Sep-2017 11:40

Hello Louis,

I also see error "Error: transition superseded". My guess is that it is related to the button being a hyperlink. It should work though.

See www.telerik.com/.../custom-toolbar-button-with-angularjs

We should report the errors to technical support so that the issue can be investigated.

I also tried to use k-options but I got error again.

I found the following approach to work.

In your constructor (I am assuming a custom view), you can run the following code:

this.$components.grid0.options.toolbar.push({

name: "resequence",

template: "<button class='k-button' id='resequence'>Resequence</button>"

});

cancelWatch = $scope.$watch(function () {

var element = angular.element("#resequence");

if (element.html()) {

return element;

} else {

return undefined;

}

}, function (element, oldValue) {

if (element) {

element[0].onclick = function() { console.log("DEBUG:"); };

cancelWatch();

}

});

I hope this helps,

Edsel

Posted by jts-law on 22-Sep-2017 11:05

Thanks Edsel, that works great.

Louis

This thread is closed