New to KendoReact? Start a free 30-day trial

Available Codemods

Updated on Nov 11, 2025

This page outlines the available codemods for migrating from KendoReact v10.0.0 to each version up until the latest.

Starting with KendoReact 11, some component packages now provide codemods to help you migrate between major versions. For more details, check out Assisted Migration.

From v10 to v11

From v11 to v12

KendoReact v10.0.0 to v11.0.0

Quick Guide

To migrate a specific KendoReact package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-react-<package-name> --from=10 --to=11

If not already installed, you will be prompted to install the Kendo CLI when running this command for the first time.

This command will check for available updates for the specified package and its peer dependencies that are already present in the project, prompt you to install them, and apply all relevant codemods.

Best Practices

For a more manageable migration process, consider the following recommended practices:

Migrate between consecutive major versions. For example, migrate from v10 to v11. This lets you review and adjust your code version by version, avoiding possible conflicts between breaking changes.
Migrate one package at a time. This provides finer control over the migration process.

Data Grid

bash

# Migrate to the latest available package version.
npx @progress/kendo-cli migrate @progress/kendo-react-grid

# Or migrate from v10 to v11.
npx @progress/kendo-cli migrate @progress/kendo-react-grid --from=10 --to=11

All Data Grid codemods perform the following:

Find all KendoReact Grid components in your code. The transformations recognize custom import names as well.
Handle both class and functional components.
Preserve your existing code.
Add missing imports.

The following table outlines the specific Data Grid codemod transformations:

Codemod	Description
`New custom cell`	Migrates from the deprecated `cellRender` prop to the new `cells` prop: Removes the `cellRender` attribute. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomCell` or similar if that name is taken). Imports `GridCustomCellProps`.
`New custom column cell`	Migrates from the deprecated `cell` prop to the new `cells` prop: Removes the `cell` attribute from the column. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomColumnCell` or similar if that name is taken). Adds a comment in the new method showing the original `cell` prop value. Imports `GridCustomCellProps`.
`New custom column filter cell`	Migrates from the deprecated `filterCell` prop to the new `cells` prop: Removes the `filterCell` attribute from the column. Adds a new `cells` attribute with a `filterCell` property pointing to a custom method. Creates a new custom cell method (named `CustomColumnFilterCell` or similar if that name is taken). Adds a comment in the new method showing the original `filterCell` prop value. Imports `GridCustomFilterCellProps`.
`New custom column footer cell`	Migrates from the deprecated `footerCell` prop to the new `cells` prop: Removes the `footerCell` attribute from the column. Adds a new `cells` attribute with a `footerCell` property pointing to a custom method. Creates a new custom cell method (named `CustomColumnFooterCell` or similar if that name is taken). Adds a comment in the new method showing the original `footerCell` prop value. Imports `GridCustomFooterCellProps`.
`New custom column header cell`	Migrates from the deprecated `headerCell` prop to the new `cells` prop: Removes the `headerCell` attribute from the column. Adds a new `cells` attribute with a `headerCell` property pointing to a custom method. Creates a new custom cell method (named `CustomColumnHeaderCell` or similar if that name is taken). Adds a comment in the new method showing the original `headerCell` prop value. Imports `GridCustomHeaderCellProps`.
`New detail expand state mechanism`	Migrates from the deprecated `onExpandChange` event handler to the new controlled component pattern using the `detailExpand` state and the `onDetailExpandChange` event handler: Removes the `onExpandChange` attribute and preserves the original value as a comment in the new handler. For class components, adds `detailExpand` to the component state and creates a class method to handle the detail expansion changes. For functional components, adds a `React.useState` hook for the `detailExpand` state and creates an arrow function to handle the detail expansion changes. Adds `detailExpand` or `onDetailExpandChange` to the Grid. Imports `GridDetailExpandChangeEvent` and `DetailExpandDescriptor`.
`New edit state mechanism`	Migrates from the deprecated `editField` prop to the new controlled component pattern using the `edit` state and event handlers: Removes the `editField` attribute and saves its value as a comment. Sets the `editable={true}` prop if not set. Adds `dataItemKey`, if missing. For class components, adds `edit` to the component state and creates a class method to handle the edit changes. For functional components, adds a `React.useState` hook for the `edit` state and creates an arrow function to handle the edit changes. Imports `GridItemChangeEvent`, `GridEditChangeEvent`, and `EditDescriptor`.
`New custom filter cell`	Migrates from the deprecated `filterCellRender` prop to the new `cells` prop: Removes the `filterCellRender` attribute. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomFilterCell` or similar if that name is taken). Adds a comment in the new method showing the original `filterCellRender` prop value. Imports `GridCustomFilterCellProps`.
`New group expand state mechanism`	Migrates from the deprecated `onExpandChange` event handler to the new controlled component pattern using `groupExpand` state and `onGroupExpandChange` event handlers. Removes the deprecated `onExpandChange` attribute. Adds new `groupExpand` state to track group expansion. Adds new `onGroupExpandChange` handler that updates the state. For class components, adds `groupExpand` to the component state and creates a class method to handle the group expansion changes. For functional components, adds a `React.useState` hook for the `groupExpand` state and creates an arrow function to handle the group expansion changes. Adds `groupExpand` and `handleGroupExpand` props. Imports `GroupExpandDescriptor` and `GridGroupExpandChangeEvent`.
`New custom header cell`	Migrates from the deprecated `headerCellRender` prop to the new `cells` prop: Removes the deprecated `headerCellRender` attribute. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomHeaderCell` or similar if that name is taken). Adds a comment in the new method showing the original `headerCellRender` prop value. Imports `GridCustomHeaderCellProps`.
`New custom row`	Migrates from the deprecated `rowRender` prop to the new `rows` prop: Removes the deprecated `rowRender` attribute. Adds a new `rows` attribute pointing to a custom row renderer method. Creates a new custom row renderer method (named `CustomRow` or similar if that name is taken). Adds a comment in the new method showing the original `rowRender` prop value. Imports `GridCustomRowProps`.
`New selection state mechanism`	Migrates from the deprecated `selectedField` prop to the new controlled component pattern using `select` state and `onSelectionChange` event handlers. Removes the deprecated `selectedField` attribute. Sets the `selectable={true}` prop if not set. Adds `dataItemKey`, if missing. For class components, adds `select` to the component state and creates a class method to handle the selection changes. For functional components, adds a `React.useState` hook for the `select` state and creates an arrow function to handle the selection changes. Adds `select` and `onSelectionChange` props. Imports `SelectDescriptor` and `GridSelectionChangeEvent`.

Date Inputs

bash

# Migrate to the latest available package version.
npx @progress/kendo-cli migrate @progress/kendo-react-dateinputs

# Or migrate from v10 to v11.
npx @progress/kendo-cli migrate @progress/kendo-react-dateinputs --from=10 --to=11

The following table outlines the specific Date Inputs codemod transformations:

Codemod	Description
`New DateInputHandle type`	(TypeScript-only) Migrates type annotations from the deprecated `DateInput` type to the new `DateInputHandle` type.
`New DatePickerHandle type`	(TypeScript-only) Migrates type annotations from the deprecated `DatePicker` type to the new `DatePickerHandle` type.

Dialogs

bash

# Migrate to the latest available package version.
npx @progress/kendo-cli migrate @progress/kendo-react-dialogs

# Or migrate from v10 to v11.
npx @progress/kendo-cli migrate @progress/kendo-react-dialogs --from=10 --to=11

The following table outlines the specific Dialogs codemod transformations:

Codemod	Description
`New DialogHandle type`	(TypeScript-only) Migrates type annotations from the deprecated `Dialog` type to the new `DialogHandle` type.
`New WindowHandle type`	(TypeScript-only) Migrates type annotations from the deprecated `Window` type to the new `WindowHandle` type.

TreeList

bash

# Migrate to the latest available package version.
npx @progress/kendo-cli migrate @progress/kendo-react-treelist

# Or migrate from v10 to v11.
npx @progress/kendo-cli migrate @progress/kendo-react-treelist --from=10 --to=11

The following table outlines the specific TreeList codemod transformations:

Codemod	Description
`New custom cell`	Migrates from the deprecated `cellRender` prop to the new `cells` prop: Removes the `cellRender` attribute. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomCell` or similar if that name is taken). Imports `TreeListCustomCellProps`.
`New custom column cell`	Migrates from the deprecated `cell` prop to the new `cells` prop: Removes the `cell` attribute from the column. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomColumnCell` or similar if that name is taken). Adds a comment in the new method showing the original `cell` prop value. Imports `TreeListCustomCellProps`.
`New custom column filter cell`	Migrates from the deprecated `filterCell` prop to the new `cells` prop: Removes the `filterCell` attribute from the column. Adds a new `cells` attribute with a `filterCell` property pointing to a custom method. Creates a new custom cell method (named `CustomColumnFilterCell` or similar if that name is taken). Adds a comment in the new method showing the original `filterCell` prop value. Imports `TreeListCustomFilterCellProps`.
`New custom column footer cell`	Migrates from the deprecated `footerCell` prop to the new `cells` prop: Removes the `footerCell` attribute from the column. Adds a new `cells` attribute with a `footerCell` property pointing to a custom method. Creates a new custom cell method (named `CustomColumnFooterCell` or similar if that name is taken). Adds a comment in the new method showing the original `footerCell` prop value. Imports `TreeListCustomFooterCellProps`.
`New custom column header cell`	Migrates from the deprecated `headerCell` prop to the new `cells` prop: Removes the `headerCell` attribute from the column. Adds a new `cells` attribute with a `headerCell` property pointing to a custom method. Creates a new custom cell method (named `CustomColumnHeaderCell` or similar if that name is taken). Adds a comment in the new method showing the original `headerCell` prop value. Imports `TreeListCustomHeaderCellProps`.
`New edit state mechanism`	Migrates from the deprecated `editField` prop to the new controlled component pattern using the `edit` state and event handlers: Removes the `editField` attribute and saves its value as a comment. Sets the `editable={true}` prop if not set. Adds `dataItemKey`, if missing. For class components, adds `edit` to the component state and creates a class method to handle the edit changes. For functional components, adds a `React.useState` hook for the `edit` state and creates an arrow function to handle the edit changes. Imports `TreeListItemChangeEvent`, `TreeListEditChangeEvent`, and `EditDescriptor`.
`New expand state mechanism`	Migrates from the deprecated `onExpandChange` event handler to the new controlled component pattern using the `expand` state and the `onExpandChange` event handler: Removes the deprecated `onExpandChange` attribute and preserves the original value as a comment in the new handler. For class components, adds `expand` to the component state and creates a class method to handle the expansion changes. For functional components, adds a `React.useState` hook for the `expand` state and creates an arrow function to handle the expansion changes. Adds `expand` and `onExpandChange` props. Imports `TreeListExpandChangeEvent` and `ExpandDescriptor`.
`New custom filter cell`	Migrates from the deprecated `filterCellRender` prop to the new `cells` prop: Removes the `filterCellRender` attribute. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomFilterCell` or similar if that name is taken). Adds a comment in the new method showing the original `filterCellRender` prop value. Imports `TreeListCustomFilterCellProps`.
`New custom header cell`	Migrates from the deprecated `headerCellRender` prop to the new `cells` prop: Removes the deprecated `headerCellRender` attribute. Adds a new `cells` attribute pointing to a custom cell method. Creates a new custom cell method (named `CustomHeaderCell` or similar if that name is taken). Adds a comment in the new method showing the original `headerCellRender` prop value. Imports `TreeListCustomHeaderCellProps`.

KendoReact v11.0.0 to v12.0.0

Quick Guide

To migrate a specific KendoReact package from v11.0.0 to v12.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-react-<package-name> --from=11 --to=12

If not already installed, you will be prompted to install the Kendo CLI when running this command for the first time.

This command will check for available updates for the specified package and its peer dependencies that are already present in the project, prompt you to install them, and apply all relevant codemods.

Best Practices

For a more manageable migration process, consider the following recommended practices:

Migrate between consecutive major versions. For example, migrate from v11 to v12. This lets you review and adjust your code version by version, avoiding possible conflicts between breaking changes.
Migrate one package at a time. This provides finer control over the migration process.

Chat

bash

# Migrate to the latest available package version.
npx @progress/kendo-cli migrate @progress/kendo-react-conversational-ui

# Or migrate from v11 to v12.
npx @progress/kendo-cli migrate @progress/kendo-react-conversational-ui --from=11 --to=12

All Chat codemods perform the following:

Find all KendoReact Chat components in your code. The transformations recognize custom import names as well.
Preserve your existing code.

The following table outlines the specific Chat codemod transformations:

Codemod	Description
`New onSendMessage handler`	Renames `onMessageSend` to `onSendMessage`.
`New authorId attribute`	Replaces `user` attribute with `authorId`, including lifting inline objects to variables if necessary.
`New messageTemplate attribute`	Renames `message` attribute to `messageTemplate`.
`New ChatSendMessageEvent type`	(TypeScript-only) Replaces type annotations from the deprecated `ChatMessageSendEvent` type to the new `ChatSendMessageEvent` type.
`Deprecated toolbar attributes`	Removes `showToolbar` attribute from the Chat. Removes `onToolbarActionExecute` attribute from the Chat. Removes `toolbar` attribute from the Chat.