KendoUI and React (aka ReactJs)

4 posts, 0 answers
  1. Roatin Marth
    Roatin Marth avatar
    65 posts
    Member since:
    Nov 2007

    Posted 20 Dec 2013 Link to this post

    Re: the React JavaScript library (http://facebook.github.io/react/)

    We are trying to figure out how we can adopt React Components and still use Kendo for some UI controls, so we do not have to re-invent controls that kendo already provides.

    How do we begin embedding React Components inside KendoUI components (for example, inside a KendoUI Grid), but more urgently how to embed arbitrary kendo ui controls inside React Components?

    For example (hypothetical):
    var Treeview = React.createClass({
        render: function() {
            return (
                <div>
                    Custom markup
                    <div><!-- build kendo treeview here --></div>
                </div>
            );
        }
    });
      
    React.renderComponent(Treeview({
        // kendo treeview plugin arguments passed here as
        // react component properties as an example
        dataSource: {
            data:[ /*...*/ ]
        }
    }), document.body)
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 21 Dec 2013 Link to this post

    Hello,

    First I have to make a disclaimer that we are not experts in the React JavaScript library and this may not be the best way to approach integration with Kendo UI.

    I created a simple demo based on an existing one that uses jQuery UI Sortable.

    The code looks like this:

    var TreeView = React.createClass({
        render: function() {
            return <div ref="treeview"></div>;
        },
        componentDidMount: function() {
            $(this.refs.treeview.getDOMNode()).kendoTreeView({
                dataSource: this.props.dataSource
            });
        }
    });
      
    React.renderComponent(<TreeView dataSource={ [ { text: "Root", items: [ { text: "Child" } ] } ] } />, document.body);

    As for integrating React Components in Kendo UI - I am not sure this can be done right now unless there is a way to invoke React from a plain <script> element (not jsx one). If this is possible then you would be able to create a grid template column and render React components there. I however couldn't find such an example - all demos were using <script type="text/jsx">.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
  4. Roatin Marth
    Roatin Marth avatar
    65 posts
    Member since:
    Nov 2007

    Posted 02 Jan 2014 Link to this post

    I only see a <Hello> component in the fiddle you linked to, but I think I get the idea, thanks.

    There are so many more questions, for example once the kendo control has been successfully rendered, how to keep it in sync with the component? Eg when one changes the other's properties/attributes are updated, but without the infinite loop of then re-rendering the other.

    I'll keep looking through these.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 Jan 2014 Link to this post

    Hello,

    Indeed the link isn't correct. Here is the right link: http://jsfiddle.net/8kEXN/. I have also updated the old one from my previous response.

    I am not sure about your second question. Feel free to update that demo to include some code which demonstrates what you need.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET AJAX banner