I'm trying to utilise the MultiSelect wrapper inside the Kendo Dialog component. I've been following the demos and reading the documentation and have set up a MultiSelect that gets data from an external source and displays it correctly. I now want to be able to pass the values that the user has selected back to the parent (Dialog) component and I'm not sure how to do so. I've read that there is a dataItems method that would retrieve what I need but I'm not sure how to access this in react, I can't find any examples to help.
Here is my component code:
class ChildQuestions extends React.Component { constructor(props) { super(props); this.dataSource = new kendo.data.DataSource({ data: props.data }) this.values= props.value this.placeholder = "Enter a question text..." } render() { return ( <div className="row"> <div className="col-xs-12 col-sm-6 example-col"> <MultiSelect dataSource={this.dataSource} placeholder={this.placeholder} dataTextField={"Text"} dataValueField={"id"} value={this.values} /> </div> </div> ); }}export default ChildQuestions;
If you could provide some example code or any guidance that would be greatly appreciated!
4 Answers, 1 is accepted
The dataItem method can be called on an event just before closing the Dialog, the main point is to ensure that the MultiSelect component will still be available at that point.
This is an example demonstrating this:
https://next.plnkr.co/edit/cQkmM4UArw8Eq80s
Also, please have in mind that the native React MultiSelect is already in the dev version. Please check a look at it as we recommend using the native components if they can cover the use cases:
https://www.telerik.com/kendo-react-ui-develop/components/dropdowns/multiselect/
Let me know if you need more information on this matter.
Regards,
Stefan
Progress Telerik
Rank 1
I was familiar with the select event and accessing the dataItem. So are you saying that I can't access all items that have been selected in one go and I have to do them one by one? If an Item is 'unselected' what would I do then? I was hoping to do something similar to this but I'm not sure if its possible in React: https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/methods/dataitems
Thanks for the info about the component version. I noticed a link to the component had gone onto your site for it yesterday but I got a 'page not found' error when I clicked it :)
Thanks again for your help.
The dataItems method is returning all values not one by one.
Please refer to the video:
https://www.screencast.com/t/HKotJBCnX
Please advise if I missed something?
Regards,
Stefan
Progress Telerik
Rank 1