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

Grid SplitButton

1 Answer 31 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mihail
Top achievements
Rank 1
Mihail asked on 19 Apr 2021, 08:36 AM

Hello,

 

Is there a way to have a SplitButton to perform action on the clicked row in the Grid?

I can only see that I have an option to specify a data property with the dropdown items. Is there a way to pass the dataItem to the split button?

for example:

 

<kendo-grid>

<kendo-grid-column>

<ng-template kendoGridCellTemplate let-dataItem>

<kendo-splitbutton>

<ng-template kendoListButtonItem let-buttonDataItem>

{{dataItem.id}}

</ng-template>

</kendo-splitbutton>

</ng-template>

</kendo-grid-column>

</kendo-grid>

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 21 Apr 2021, 06:46 AM

Hi Mihail,

I am afraid that the Kendo SplitButton does not support such type of content creation, as the buttons of the component need to be passed as an objects array:

https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding/

A possible approach is to set the data property to a custom function which will dynamically push each dataItem to a custom array:

<kendo-grid-column field="ProductName">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <kendo-splitbutton
            (buttonClick)="onPaste()"
            [data]="setData(dataItem)"
            icon="paste"
          >
            Paste
          </kendo-splitbutton>
        </ng-template>
      </kendo-grid-column>
 public splitButtonData = [];

  setData(dataItem) {
    this.splitButtonData.push({
      text: dataItem.ProductName,
      click: () => {
        // do something
      }
    });
    return this.splitButtonData;
  }

 

Or create the SplitButton items, in the constructor by iterating the Grid collection:

<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <kendo-splitbutton
            (buttonClick)="onPaste()"
            [data]="splitButtonData"
            icon="paste"
          >
            Paste
          </kendo-splitbutton>
</ng-template>


  public splitButtonData = [];
  
  constructor() {
    this.splitButtonData = sampleProducts.map(item => {
      return {
        text: item.ProductName,
        click: () => {
          console.log(item.ProductName);
        }
      };
    });

    this.gridData = sampleProducts;
  }

I hope this sheds some light. In case of further questions, do not hesitate to write back.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
General Discussions
Asked by
Mihail
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or