Display dropdown in one of the column in Kendo Grid

[Prateek]

I have a requirement where I need to either display simple text if available otherwise need to show dropdown list in the same column in Kendo Grid. The list items for every row need to bound at runtime and this list item is part of the data source to which grid is bound to.

Kindly help

[Hetali]

Hi Prateek,

To show the text or the dropdown list based on the availability of the text, use the ngIf directive in the CellTemplateDirective of the Kendo UI Grid and accordingly show the text or the DropDownList. For example:

<kendo-grid-column field="Category.CategoryName" title="Category">
  <ng-template kendoGridCellTemplate let-dataItem>
    <span *ngIf="dataItem.Category.CategoryName">
      {{ dataItem.Category.CategoryName }}
    </span>

    <span *ngIf="!dataItem.Category.CategoryName">
      <kendo-dropdownlist
        [data]="dataItem.List"
        [defaultItem]="'Select item...'"
      >
      </kendo-dropdownlist>
    </span>
  </ng-template>
</kendo-grid-column>

In this StackBlitz example, when the CategoryName is unavailable, the Grid shows the Kendo UI DropDownList.

I hope this helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik