Returning selected items from a MultiSelect

5 posts, 0 answers
  1. Rach
    Rach avatar
    5 posts
    Member since:
    Feb 2013

    Posted 24 Jul 2018 Link to this post

    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!

  2. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 25 Jul 2018 Link to this post

    Hello, Rach,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Rach
    Rach avatar
    5 posts
    Member since:
    Feb 2013

    Posted 25 Jul 2018 in reply to Stefan Link to this post

    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.

  4. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 26 Jul 2018 Link to this post

    Hello, Rach,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Rach
    Rach avatar
    5 posts
    Member since:
    Feb 2013

    Posted 26 Jul 2018 in reply to Stefan Link to this post

    Thanks so much Stefan, the video was very helpful and my code now works :)
Back to Top