This is a migrated thread and some comments may be shown as answers.

KendoUI React Redux

4 Answers 181 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 15 Jun 2016, 06:47 PM

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,

4 Answers, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 16 Jun 2016, 06:50 AM
TL;DR Is it worth the effort of maintaining the DataGrid array of data inside of Redux state?
0
Accepted
Alex Gyoshev
Telerik team
answered on 20 Jun 2016, 07:32 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Masha Youlus-Susskind
Top achievements
Rank 1
answered on 22 Mar 2018, 07:42 AM

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.

0
Stefan
Telerik team
answered on 23 Mar 2018, 09:04 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Integration with other JS libraries
Asked by
David
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Masha Youlus-Susskind
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or