This is a migrated thread and some comments may be shown as answers.

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

2 Answers 495 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rafael
Top achievements
Rank 1
Rafael asked on 11 Jun 2019, 04:44 AM

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.

2 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 12 Jun 2019, 01:22 PM
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:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Rafael
Top achievements
Rank 1
answered on 08 Jul 2019, 03:30 AM
Thanks, it worked.
Tags
Grid
Asked by
Rafael
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Rafael
Top achievements
Rank 1
Share this question
or