KendoUI and React (aka ReactJs)

[Roatin Marth]

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)

[Atanas Korchev]

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

[Roatin Marth]

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.

[Atanas Korchev]

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