How to put multiple commands buttons into one split-button dropdown in Kendo grid?

[Rafael]

Hi all,

 

I am looking for a way to put multiples commands buttons, for i.e., "Edit", "Delete", "Print" into one split-button dropdown in Kendo Grid.

 

I've found these buttons here (https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items.menubuttons) how I wanted but I am not getting the template right for it.

 

The idea is to have a default clickable button to "Edit" and an dropdown arrow to select "Delete" or "Print".

 

Thanks in advance.

[Georgi]

Hello Rafael,

You could create a toolbar widget within the template of a column.

e.g.

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { template: "<div class='toolbar'></div>" } // displays the built-in "edit" and "destroy" commands
  ],
  editable: "inline",
  dataSource: [ { name: "Jane Doe" } ],
  dataBound:function(){
    $('.toolbar').kendoToolBar({
      items: [ {
        type: "splitButton",
        text: "Edit",
        click:function(e){
          var grid = $('#grid').data('kendoGrid');

          grid.editRow(e.target.parents('tr'))
        },
        menuButtons: [
          { id: "foo", text: "Print", click:function(){alert('print')} },
          { id: "bar", text: "Delete", click:function(e){
            var grid = $('#grid').data('kendoGrid');

            grid.removeRow(e.target.parents('tr'))
          } },
        ]
      } ]
    });
  }
});

Below you will find a small sample which demonstrates the above approach:

• https://dojo.telerik.com/eMUwAqUH

Regards,
Georgi
Progress Telerik

[Rafael]

Thanks, it worked.