Is there a way to dictate the hierarchy for what cell override to use for the Grid vs Column cell override?

[Jonathon]

So assuming a have a Grid with a custom cell override like so:

<Grid

            {...props}

            cells={hidden? { data: HiddenCell } : cells}

            data={hidden? loadingData : data}

></Grid>

 

and the Grid has columns where one column has a custom cell as well

<GridColumn

            {...props}

            cells={{ data: CustomCell }}

></GridColumn>

Is there a way to set the grid so that the custom cell on the Grid overrides the custom cell on the Column?

[Vessy]

Hi, Jonathon,

In the KendoReact Grid, the GridColumn.cell property has higher specificity than the Grid.cells property. This means that if both are defined, the custom cell defined at the column level will take precedence over the grid-level custom cell. Unfortunately, there isn't a built-in way to reverse this order directly.

However, you can control the rendering logic within your custom cell components to achieve the desired behavior in a similar way:

const CustomCell = (props) => {
    if (props.useGridCell) {
        return <HiddenCell {...props} />;
    }
    return <td>{props.dataItem[props.field]}</td>;
};

// Usage in GridColumn
<GridColumn
    {...props}
    cell={CustomCell}
/>

You can also use state or props to dynamically control the rendering logic, allowing you to switch between the column-level and grid-level custom cells as needed.

I hope the provided information will be helpful for you.

Regards,
Vessy
Progress Telerik