Setting Values from Remote Data Source

[Keith]

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.

[Georgi Krustev]

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

[Keith]

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

[Georgi Krustev]

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