Kendo React Grid Support for React Hooks?

[GokuJim]

I am having issues using KendoReact grid components within React Functional Components using hooks such as useEffect. One issue is that if a ExcelExport component is used, a maximum limit of state updates is reached. Furthermore if a useEffect is used pointing to the state.data of a Kendo React Grid component, the data fires off any inline grid custom column cells which includes Kendo DropDowns.

Are hooks supported yet for Kendo React components, and if not, when can we expect support?

 

My environment is using the latest versions of Redux-Toolkit, React-Redux, Redux and React.

 

Thanks,

Jim Minnihan

SKF USA, Inc.

[Stefan]

Hello, James,

The KendoReact component can work with React Hooks, in fact, some of them are entirely written with React Hooks.

In general, class components and components written on React Hooks should be working nicely together.

I made an example of the Grid with Excel export with Hooks and it is working as expected:

https://stackblitz.com/edit/react-e4m5x4?file=app/main.jsx

As for the editing example, is it possible to share an example showcasing the issue and I will be happy to inspect it further?

We have an example with Hooks and editing here:

https://www.telerik.com/kendo-react-ui/components/integration/nextjs/

This is another sample application written entierly using React Hooks and KendoReact components:

https://github.com/telerik/kendo-react-finance-portfolio

Regards,
Stefan
Progress Telerik

[GokuJim]

I used your example to get around the issue with ExcelExport, so thanks! However, my inline cell edit grid is still having issues with React refreshing the DOM for every cell containing a Kendo React Dropdown element. How can I structure my code to use React.useMemo when the cell rendering function contains an if clause. 

Example code snippet that causes React to re-render for every row of the grid on initial render function:

<GridColumn cell={ renderChangeDatetimeCell }
                      editable={ false }
                     field="changeDatetime" title={ t('changed') }
                    width={ setColumnWidthPercent(10) }/>

Cell rendering function:

const renderChangeDatetimeCell = React.memo((column: any) => {
    if (column.dataItem.changeDatetime === '') {
         return (
            <td className="td"/>
        )
    } else {
        return (
           <td className="td">
               <Moment format={"YYYY-MM-DD HH:mm:ss"}>{column.dataItem.changeDatetime}</Moment>
           </td>
       );
   }
});

 

setColumnWidthPercent function:

const setColumnWidthPercent = (percentage: number) => {
    return Math.round(state.gridWidth / 100) * percentage;
};

Notes: the 't' function is from the react-i18next useTranslations package.

Question: what React Hooks do you recommend I use for rendering the drop down cell and for setting the column widths dynamically properly without full DOM re-render happening?

 

Thanks again for your great support!

Jim

SKF USA, Inc.

[Stefan]

Hello, James,

I`m glad the Excel export issue is resolved.

As for the DropDownList issue. I noticed that React.memo is used, but I can suggest using React.useMemo hook and passing the parameters which have to monitor for changes:

https://reactjs.org/docs/hooks-reference.html#usememo

A similar approach can be used for the setColumnWidthPercent function where the function will be called again only when the "percentage" value passed to it is changed.

Please check with an example with the Grid and useMemo. It is for the row not for a cell, but it can prove helpful in the process:

https://stackblitz.com/edit/react-qed7me-warzeh?file=app/main.jsx

Please give these two a try and advise if the issue still occurs.

Regards,
Stefan
Progress Telerik