Using "kendo-dropdownbutton" inside a "kendoGridCellTemplate"

[SHEREEN]

Hi,

We need to use a dropdown inside a cell template on a data grid. I can get the thing to render but am encountering issues.

1. If we use a static list of "dropdownbutton" items for the "data" I can't identify for which row the menu was clicked. They're all the same.
2. If I build a dynamic list, the "click" event fails to fire for some reason.

What I would really prefer is the ability to add sub components in the template markup so that they are rendered inside the template without the "data" binding.

Can we achieve this ?

<kendo-dropdownbutton [primary]="true">
    <kendo-dropdownbuttonitem [text]="'My Option A'" (click)="cmdSelectMyOptionA(dataItem)" />
    <kendo-dropdownbuttonitem [text]="'My Option B'" (click)="cmdSelectMyOptionB(dataItem)" />
</kendo-dropdownbutton>

If not, what is your suggestion for a "per-row" rendering of the dropdown but with dataItem context fro the row present in the click event.

Your controls are great, but when we encounter a problem its usually an annoying as hell one !

 

[Martin]

Hi Shereen,

Indeed Kendo DropDownButton component does not support the desired rendering. Basically the kendoGridCellTemplate context provides additional fields, such as dataItem which represent the current data row. Here you can find all supported fields:

https://www.telerik.com/kendo-angular-ui/components/grid/api/CellTemplateDirective/#toc-celltemplatedirective

The dataItem field can be passed further on itemClick event for example:

 <kendo-grid-column title="dropdowm">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <kendo-dropdownbutton
            [data]="listItems"
            (itemClick)="onChange($event, dataItem)"
          >
            User Settings
          </kendo-dropdownbutton>
        </ng-template>
      </kendo-grid-column>

Now the row context from where an option is selected will be returned as well:

https://stackblitz.com/edit/angular-dvvrhq?file=app%2Fapp.component.ts

However, there are no dedicated events that can be triggered on each dropdown item. All supported events can be found here:

https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/#toc-events

The itemClick event returns the selected option, which can be used for further processing in the event handler:

  onItemClick (item) {
    if (item === "My Option A") {
      // actions for option A
    }
  }

I hope this helps. Let me know if I am missing something or if any further assistance is required for this case.

Regards,
Martin
Progress Telerik