Grid With Custom Button - Forum - Kendo UI Builder - Progress Community
 Forum

Grid With Custom Button

This question is answered

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
Verified Answer
  • 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
  • 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

  • Thanks Edsel, that works great.

    Louis