Column template when Native grid is grouped

[Zjef]

Hi

I'm struggeling to find a working solution for the following problem, I need to be able to define custom templates for specific columns in the Native Grid when the grid is grouped. Somehing like the solution when the grid is not grouped using the "cell" property of GridColumnProps. I'm currently changing all wrapper components to native ones in my project, in the wrapper grid component we could just add a template property to the column definition and then return a string or function.

I need some help on how I should approach this for the Native grid. I tried the solution as stated in the docs using a named slot and the cell render prop of the grid but this renders a template for every cell and I need to be able to use a custom template for each column that requires one. But I can't seem to solve this issue completely using this approach.

Any help is appreciated,

thanks in advance!

[Petar]

Hi, Zjef.

Here is a StackBlitz example demonstrating how the desired functionality can be implemented. To achieve it, the following template is added marked in yellow code to the CustomCell template.

  <td v-if="renderCell" :class="className">
    <b v-if="field === 'UnitPrice' && level !== 0">{{
      getNestedValue(field, dataItem)
    }}</b>
    <span v-else-if="field !== 'selected'">{{
      getNestedValue(field, dataItem)
    }}</span>
    <span v-else>
      <kcheckbox
        :checked="getNestedValue(field, dataItem)"
        id="inputId"
        @change="handleOnChange"
      />
      <label class="k-checkbox-label" for="inputId" />
    </span>
  </td>

The above will bold the value in the UnitPrice column only when there is grouped data. To apply the formatting no matter if the data is grouped or not, you can remove the code in green. 

I hope the suggested example will help you achieve what you need in your scenario.

Regards,
Petar
Progress Telerik