Display dropdown in one of the column in Kendo Grid

1 Answer 87 Views
DropDownList Grid
Prateek
Top achievements
Rank 1
Prateek asked on 28 Apr 2021, 12:54 PM

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

1 Answer, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 29 Apr 2021, 04:02 PM | edited on 29 Apr 2021, 04:04 PM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
DropDownList Grid
Asked by
Prateek
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or