kendo grid how to set kendo-grid-column class

[David]

hi,

 

i have a snippet codes:

https://codesandbox.io/p/sandbox/adoring-galois-4cpxxm?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A29%2C1

 

what i want is 

if the product name is "Chai", i want to give the "TD" cell  a speical css class name.

     <kendo-grid-column field="ProductName">

        <ng-template

          kendoGridHeaderTemplate

          let-column

          let-columnIndex="columnIndex"

        >

          {{ column.field }}({{ columnIndex }})

        </ng-template>

        <ng-template

          kendoGridCellTemplate

          let-dataItem

          let-field

          let-rowIndex="rowIndex"

        >

          <span>{{ field["ProductName"] }}</span>

        </ng-template>

      </kendo-grid-column>

 

i can get the product name by the above codes, but i dont know how to set the "TD" class name . the TD is the parent element of the span .

can you please tell me how to do this?

[David]

any update please?

[Zornitsa]

Hi David,

To add a custom class for the Grid column cells, the developer can use the class property of the <kendo-grid-column> component. You can refer to the following documentation article for more details and a runnable demo demonstrating how to use the class property:

• https://www.telerik.com/kendo-angular-ui/components/grid/styling-and-appearance/columns#customizing-column-cells

For your convenience, I am linking below the shared CodeSandbox example, updated to use the class property for the ProductName column:

• https://codesandbox.io/p/sandbox/lucid-sun-hwr2hm?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A15%2C21

With the above being said, if you desire to conditionally target only specific cells and style them, the class property can be combined with the rowClass callback of the Grid, as explained in the following article from our documentation:

• https://www.telerik.com/kendo-angular-ui/components/grid/styling-and-appearance/cells#highlighting-specific-row-cells

Please observe the provided suggestion and let me know if this is what you are looking for.

Regards,
Zornitsa
Progress Telerik