KendoUI React Redux

[David]

Hi,

I'm looking for recommendations on integrating Kendo with React. (I have seen a few existing limited examples)

My team chose Kendo, even though it isn't React native, because the client loves the look and functionality and we see that your dev roadmap eventually includes React.

In the meantime we have to create a bridge between the two worlds.

The main widget we are using is the fully functional Kendo Grid.

It seems there are two general approaches to using Kendo in React / Redux:

• Hook into all of the events of the control and pass all configuration objects and data through the Redux reducer.
• Have the widget inside a React component but use the standard kendo data source pointed at a service thus bypassing Redux central store.

We chose the first option which is working but it is a lot of work!

We are considering if we should instead have chosen the second option - store only the Grid configuration options inside Redux and have the Grid load data directly from a service outside of the Redux flow.

 

Can anyone recommend one option over the other?

The first option seems too much work now that we need to add nested grids!

Is there any indication yet if the React native Kendo controls will be designed to work more easily with Redux actions and reducers (I know React and Redux are different technologies but they are very commonly used together).

 

Thanks,

[David]

TL;DR Is it worth the effort of maintaining the DataGrid array of data inside of Redux state?

[Alex Gyoshev]

Hello David,

At this time, the Kendo UI jQuery Grid is most painlessly used inside React by wrapping it in a component, overriding shouldComponentUpdate and using the dataSource (the second option). See the kendo-ui-react community package, which takes this approach.

When you decide to keep the data in the redux store, you get features such as time travel, persistent state and control over the fetching of data, all at the cost of complexity. Depending on the feature set you use, you may also have to sync the grid state with the redux store.

 

> Is there any indication yet if the React native Kendo controls will be designed to work more easily with Redux actions and reducers?
Yes, the current set of React widgets is designed to work on top of stateless components and trigger events that can easily be hooked to redux dispatch. These are still in preview, and we would appreciate any feedback!

Regards,
Alex Gyoshev
Telerik

 

 

[Masha Youlus-Susskind]

Hello, I do not see native React support in KENDO roadmap. 

When you plan to implement this important feature? 

I consider to recommend to renew Telerik suite for my organization for another year, so my decision partly depends on your answer.

[Stefan]

Hello, Masha,

The Kendo UI released React wrappers components in September last year:

https://www.telerik.com/kendo-react-ui/components/#react-wrappers

Also, at the beginning of this year we have native React components:

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

This is the official roadmap for the native React components:

https://www.telerik.com/kendo-react-ui/roadmap/

We also have an example of using the Kendo UI Grid React wrapper with Redux:

https://www.telerik.com/kendo-react-ui/wrappers/grid/data-binding/redux-binding/

Additionally, the following sample application is made with Kendo UI React components and Redux:

https://telerik.github.io/react-dashboard/dashboard

Please let me know if you need more details on this matter.

Regards,
Stefan
Progress Telerik