Setting Values from Remote Data Source

4 posts, 0 answers
  1. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 10 May 2013 Link to this post

    I have a multi select control which allows users to select items, I save the selected items to a database. When the page is next loaded I want to retrieve the list of items from a remote data source but also set the currently selected items.

    My code is:

      $('#componentList').kendoMultiSelect(
            {
                autoBind: false,
                dataTextField: 'COMPONENT_NAME',
                dataValueField: 'COMPONENT_ID',
                dataSource: {
                    transport: {
                        read: {
                            url: '/Data/GetData'
                            dataType: 'json'
                        }
                    },
                    schema: {
                        data: function (data) { //specify the array that contains the data
                            return data.fullList;
                        }
                    }
            });

    As you can see my web service returns the data in the field fullList, I also have another field called selectedList on my datasource.  How do I set the values from that?  Do I have to do a seperate ajax call to get the selected data or can this be done in a single server round trip?

    Thanks.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 14 May 2013 Link to this post

    Hello Keith,

     
    When MultiSelect is not initially bound (autoBind: false) it does not have corresponding data items and that is why the selected tags are not shown. If you check the latest internal build, it allows to define a list of data items and pass it to the value option. Thus the widget does not require to fetch the service in order to show selected items. To answer your question, if you have the selected data items on initial rendering, then you can set the value option. If not, then you will need to fetch the source.

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 14 May 2013 Link to this post

    Hi Georgi,

    Thanks for replying.  I can quite easily change autobind to true.  I still can't see how I can specify the values from returned datasource.  Can you point me in the right direction?  

    Thanks,
    Keith
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 15 May 2013 Link to this post

    Hello again Keith,

     
    If you persist selected items in the returned data. For instance, each object has a selected property or something like this, then you will need to wire the change event of the widget's datasource and grep selected items. In general, this is not practical and I strongly suggest you persist selected values in a separate object/property and when widget is defined to set value option:

    $('#componentList').kendoMultiSelect({
        autoBind: true,
        dataTextField: 'COMPONENT_NAME',
        dataValueField: 'COMPONENT_ID',
        dataSource: {
            transport: {
                read: {
                    url: '/Data/GetData'
                    dataType: 'json'
                }
            },
            schema: {
                data: function (data) { //specify the array that contains the data
                    return data.fullList;
                }
            }
        },
        value: ["1", "2"]
    });

    In order to help you further I will need a runnable jsFiddle/jsBin demo.

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready