Binding Kendo widget values to a Kendo template/observable using React?

Question

I am messing around with Kendo UI React as I have a lot of dynamic component creation and being able to house them in react classes and instantiate instances as they are needed seems quite nice.

However, in JQuery, I would do something like: <select id="multi-select" data-role="multiselect" data-bind="value: my-multiselect"></select>

Then when the template that multiselect was in would be bound to an observable, any changes were reflected in that observable.

However, I am not sure how this is done with the React widgets, since their syntax is slightly different. I so far have a multiselect that is rendered like this:

            render() {
                return (
                    <div>
                        <window.KendoDropdownsReactWrapper.MultiSelect 
                            id="user-filter"
                            change={this.onChange}
                            select={this.onSelect}
                            dataSource={this.dataSource}
                            placeholder={this.placeholder}
                            value={this.values}
                            dataTextField={this.dataTextField}
                            dataValueField={this.dataValueField}
                            template={this.template}
                            tagTemplate={this.tagTemplate}
                            filter={this.filter}
                            autoClose={this.autoClose} />
                    </div>
                );
            }

How would I set up binding so that this multiselect is bound to a value in an observable?

score 1 · Answer 1 · answered Apr 16 '18 at 13:05

I believe that the case with React is not so straightforward as with JQuery and Angular. The solution that works for me is to subscribe to the changes of the Observable and pass a new dataSource to the MultiSelect component each time.

Here is an example:

class MultiSelectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = { items: [] };
    }

    render() {
        var dataSource = new kendo.data.DataSource({ data: this.state.items });

        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <MultiSelect dataSource={dataSource} />
                </div>
            </div>
        );
    }

    componentDidMount() {
        var observable = Rx.Observable.create(function (observer) {
            observer.next("Item 1");
            observer.next("Item 2");
            observer.next("Item 3");
            observer.complete();
        });
        observable.subscribe(
            value => {
                this.setState(prevState => {
                    return { items: [...prevState.items, value] };
                });
            }
        );
    }
}

Binding Kendo widget values to a Kendo template/observable using React?

1 Answers1