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/