Migrating KendoReact v10 to v11

This page outlines the available codemods for migrating from KendoReact v10 to KendoReact v11.

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

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

# If not already installed, you will be prompted to install the Kendo CLI.

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

# If not already installed, you will be prompted to install the Kendo CLI.

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

# If not already installed, you will be prompted to install the Kendo CLI.

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.

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-dialogs --from=10 --to=11

# If not already installed, you will be prompted to install the Kendo CLI.

The following table outlines the specific TreeList codemod transformations:

Codemod	Description
New TreeListToolbarHandle type	(TypeScript-only) Migrates type annotations from the deprecated TreeListToolbar type to the new TreeListToolbarHandle type.

Suggested Links

• Keeping Up to Date
• KendoReact Changelog
• Breaking Changes
• Rendering Changes