KendoUI React Redux

5 posts, 1 answers
  1. David
    David avatar
    3 posts
    Member since:
    Jul 2011

    Posted 15 Jun 2016 Link to this post


    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).



  2. David
    David avatar
    3 posts
    Member since:
    Jul 2011

    Posted 16 Jun 2016 Link to this post

    TL;DR Is it worth the effort of maintaining the DataGrid array of data inside of Redux state?
  3. Answer
    Alex Gyoshev
    Alex Gyoshev avatar
    2527 posts

    Posted 20 Jun 2016 Link to this post

    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!

    Alex Gyoshev
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  4. Masha Youlus-Susskind
    Masha Youlus-Susskind avatar
    3 posts
    Member since:
    Dec 2009

    Posted 22 Mar 2018 in reply to Alex Gyoshev Link to this post

    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.

  5. Stefan
    Stefan avatar
    3012 posts

    Posted 23 Mar 2018 Link to this post

    Hello, Masha,

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

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

    This is the official roadmap for the native React components:

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

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

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

    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.
Back to Top