Grid SplitButton

[Mihail]

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>

[Martin]

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