angularkendo-gridkendo-ui-angular2kendo-angular-ui

How to create dynamic cells for Kendo grid for Angular

I have a Kendo grid in which I need different input controls in a single column depending on data. I have three scenarios:

  1. If the value is true, checkbox should come on edit.
  2. If the value is a string or number, textbox should come on edit
  3. If the value is More, hyperlink should come on edit.

enter image description here

Please see the screenshot above.

Solution

  • In your template, where you define your columns, you can use a custom template for your cells. In this you can write some conditions to decide what to render:

    <kendo-grid-column field="example" title="Example" width="100">
    <ng-template kendoGridCellTemplate let-dataItem>
        <!-- You can use ngIf and/or ngSwitch here. -->
    </ng-template>
</kendo-grid-column>

    API: https://www.telerik.com/kendo-angular-ui/components/grid/api/CellTemplateDirective/