KendoUI React Redux

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

    Posted 15 Jun Link to this post

    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,

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

    Posted 16 Jun Link to this post

    TL;DR Is it worth the effort of maintaining the DataGrid array of data inside of Redux state?
  3. UI for ASP.NET AJAX banner
  4. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 20 Jun 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!

    Regards,
    Alex Gyoshev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top