This is a migrated thread and some comments may be shown as answers.
KendoUI and React (aka ReactJs)
3 Answers 355 Views
This is a migrated thread and some comments may be shown as answers.
Roatin Marth
Top achievements
Rank 1
Roatin Marth asked on 20 Dec 2013, 09:31 PM
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)

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 21 Dec 2013, 08:46 AM
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!
0
Roatin Marth
Top achievements
Rank 1
answered on 02 Jan 2014, 02:26 PM
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.
0
Atanas Korchev
Telerik team
answered on 02 Jan 2014, 03:49 PM
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!
Asked by
Roatin Marth
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Roatin Marth
Top achievements
Rank 1
Share this question
or