Preselect value in kendo multiselect with server filtering

Question

I have a kendo multiselect with serverFiltering set to true.

$("#ddlAnalysisTeamMember").kendoMultiSelect(
        {
            autoBind: false,
            minLength: 3,
            //placeholder: 'User Name',
            dataTextField: 'Text',
            dataValueField: 'ID',
            filter: 'contains',
            delay: 200,
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: _VirDir("GetUsernameMultiAutoComplete", "WidgetsLoad"),
                        dataType: 'json'
                    }
                }
            }
        }
    );

---

What I need

I have already saved some data selected in this in an object. I want to set this values in this multiselect, say on click of a button.

This is the format i saved the selected items.

searchItem.TeamMember = "[{"ID":572053,"Text":"Account, Test"},{"ID":830620,"Text":"07test, Test"}]"

---

What I tried so far? I try to set the value to the multiselect like this

$("#ddlAnalysisTeamMember").data("kendoMultiSelect").value($.parseJSON(searchItem.TeamMember));

But its not setting the value. Then I tried with setting the datasource like this.

 $("#ddlAnalysisTeamMember").data("kendoMultiSelect").setDataSource($.parseJSON(searchItem.TeamMember));

This set the value in multiselect, but auto suggest is not working. when we type, there is no search happening in multi select.

---

Is there anything else I miss? Do i have to save it in any other format? What other methods to set value to a multiselect with server filtering?

Answer 1

Finally I found something that is working for me.

searchItem.TeamMember = "[{"ID":572053,"Text":"Account, Test"},{"ID":830620,"Text":"07test, Test"}]"
LoadMultiselectData($("#ddlAnalysisTeamMember").data("kendoMultiSelect"), searchItem.TeamMember);

LoadMultiselectData = function (kendoMultiSelect, data) {
    if (data != null) {
        var jsonData = $.parseJSON(data);
        if (jsonData.length > 0) {
            var dataIDs = $.map(jsonData, function (n, i) {
                return n.ID;
            });
            kendoMultiSelect.dataSource.data(jsonData);
            kendoMultiSelect.value(dataIDs);
        }
    }
    else {
        kendoMultiSelect.dataSource.data([]);
        kendoMultiSelect.value([]);
    }
}

This solve my issue. Is there any better way to improve this?