Issues with rowRender, selectedField, and expandField after upgrading to Grid v11.1 and React 19.1

[Akhilesh]

Hi Kendo Team,

We recently upgraded our project dependencies — Kendo UI Grid to v11.1 and React to v19.1.

After the update, we faced several issues with cell and headerCell, which we managed to resolve using your documentation. However, we are still encountering issues with the following:

1. rowRender – Our custom row rendering is not working as expected after the upgrade.

2. selectedField – Selection is not applying correctly on rows using this field.

3. expandField="expanded" – The expand/collapse functionality is not behaving as it did previously or not rendering the detail rows.

Can you please confirm:

• Are these features fully supported in Grid v11.1 with React 19.1?

• Are there any breaking changes or updated implementation patterns we should follow?

• Could you share examples or updated documentation for these features?

Thank you,

[Vessy]

Hello, Akhilesh,

We introduced several major improvements in the Grid in the last couple of releases which came with the required deprecation of some props like the listed by you ones. In order to define a custom row with the new API of the Grid you will need to use the `rows` prop and `rows.data` in specific for a custom data cell:

• https://www.telerik.com/kendo-react-ui/components/grid/rows/custom-rows

The Grid also comes with built-in auto processing data mechanism so the selection, grouping, reordering, etc. could be handled out-of-the box in case you do not want to use the Grid in controlled mode:

• https://www.telerik.com/kendo-react-ui/components/grid/state-management#built-in-state-management 

For detailed guidance on updating KendoReact packages, you can refer to the official documentation:

• https://www.telerik.com/kendo-react-ui/components/installation/up-to-date/#toc-updating-to-latest-versions 

You can also check the Updates section of our documentation providing detailed lists of the Rendering and breaking changes in the different releases:

• KendoReact - https://www.telerik.com/kendo-react-ui/components/updates/breaking-changes
• KendoReact - https://www.telerik.com/kendo-react-ui/components/updates/rendering-changes 
• Kendo Themes - https://www.telerik.com/design-system/docs/themes/release-notes/breaking-changes/v11-0-0/ 
  

I hope the provided information will be helpful but do let me know if I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik

[Akhilesh]

Thanks for your support — I was able to fix all other issues, but I’m still unclear on one point.

In the following code:

<Grid
  className="mt-4"
  detail={DetailGrid}
  expandField="expanded"
  onExpandChange={onExpandChange}
  data={reportWithTotal}
  rows={{ data: CustomRow }}
/>

   const onExpandChange = (e: any) => {
            const newData = data?.map((item: any) =>
                item[`${idParam}`] === e.dataItem[`${idParam}`]
                    ? { ...item, expanded: !item?.expanded }
                    : item
            );
            setData(newData);
        };

I’m getting this TypeScript error:

Type '{ ... }' is not assignable to type 'GridProps'.
Property 'expandField' does not exist on type 'GridProps'.

Can you please clarify what I should use in place of expandField, or what the recommended approach is now for controlling detail row expansion?

Thank you!

[Akhilesh]

Thanks for your support — I was able to fix all other issues, but I’m still unclear on one point.

In the following code:

<Grid
  className="mt-4"
  detail={DetailGrid}
  expandField="expanded"
  onExpandChange={onExpandChange}
  data={reportWithTotal}
  rows={{ data: CustomRow }}
/>

   const onExpandChange = (e: any) => {
            const newData = data?.map((item: any) =>
                item[`${idParam}`] === e.dataItem[`${idParam}`]
                    ? { ...item, expanded: !item?.expanded }
                    : item
            );
            setData(newData);
        };

I’m getting this TypeScript error:

Type '{ ... }' is not assignable to type 'GridProps'.
Property 'expandField' does not exist on type 'GridProps'.

Can you please clarify what I should use in place of expandField, or what the recommended approach is now for controlling detail row expansion?

Thank you!

[Vessy]

Hi, Akhilesh,

The expandedField of the Grid was replaced with detailExpand, while the onExpandChange event was removed in favour of both onDetailExpandChange (for detail-row expansion) and onGroupExpandChange (for group expansion).

All of these changes are described here - https://www.telerik.com/kendo-react-ui/components/updates/breaking-changes/11-0-0#grid 

You can see a sample demonstrating the proper setup with the latest version of the Grid here - https://www.telerik.com/kendo-react-ui/components/grid/grouping#using-the-grouping-in-controlled-mode 

Regards,
Vessy