Preselect item in multiselect mvvm

[Neeraj]

I am trying to preload item in Multiselect using  the  are not getting preloaded.  I get from  as shown below:

[{"Code":"MAA","City_code":"MAA","City_Name":"Chennai"}]


HTML for kendo in  is :

<select class="request-via-multiselect" data-role="multiselect" data-max-selected-items="2" data-value-primitive="true" data-item-Template="AirportTemplate" data-text-field="Code" data-value-field="Code" data-bind="value: ArriveDepartDetails.via, source: ViaSource"></select>

 

 

via (array) structure: 
 via : ["xyc"]

structure:

 

ViaSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: rootUrl("GetData/GetCountry"),
                            //dataType: "json",
                            data: function() {
                                return {

                                    additionaldata: JSON.stringify(AirRequestViewModel.AirItem.AirVMList.SegmentInfo[0].ArriveDepartDetails.via)
                                };
                            }
                        }
                    },
                    serverFiltering: true
                })

 

The  contains that needs to be preselected on load.

 After getting the loading symbol go and filter also   If remove the data section from kendo it

 

 

 

 

 

 

 

[Neeraj]

also checked this but worked

http://www.kendoui.io/kendo-ui/web/multiselect/how-to/preselect-items-using-mvvm

[Neeraj]

also checked this but worked

http://www.kendoui.io/kendo-ui/web/multiselect/how-to/preselect-items-using-mvvm

[Neeraj]

It got solved !!  was not sending a property of  in response.  think in MVVM we need to send every property of  which is used  it was not working 

[Stefan]

Hello Neeraj,

I'm glad to hear that the issue is resolved.

I also review the other post, and the multiSelect was working as expected on my end with the provided data format and the MultiSelect options:

 

http://dojo.telerik.com/OMaZi

I made the same post in the other forum thread on this subject, so other people can observe the example.

Regards,
Stefan
Progress Telerik

[Neeraj]

Hello,
        There is another   have multiple . and value is in 

AirRequestViewModel.AirItem.AirVMList.SegmentInfo[0].ArriveDepartDetails.via

for preselection  values are saved in :

AirRequestViewModel.AirItem.AirVMList.SegmentInfo[0].ArriveDepartDetails.ViaAirports

stringify of viaAirport: "[{"Code":"DEL","Name":null},{"Code":"MAA","Name":null}]"

There are multiple SegmentInfo object each having different data in viaAirport. Currently my Source for ViaMultiselect is at 

AirRequestViewModel.AirItem.ViaSource

How can use source for preloading other object values or ViaSource should be at AirRequestViewModel.AirItem.AirVMList.SegmentInfo[0].ArriveDepartDetails Level ?

 

[Neeraj]

this is my asp.net  project 

in :

AirRequestViewModel = kendo.observable({
            AirItem: {
                AirVMList: @Html.Raw(Json.Encode(Model)),
                FlightDestinationSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: rootUrl("GetData/GetCountry"),
                            dataType: "json"
                        }
                    },
                    serverFiltering: true
                }),
                FlightOriginSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: rootUrl("GetData/GetCountry"),
                            dataType: "json"
                        }
                    },
                    serverFiltering: true
                }),
                ViaSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: rootUrl("GetData/GetCountry"),
                            dataType: "json",
                            data: function() {
                                return {
                                    adddata: JSON.stringify(AirRequestViewModel.AirItem.AirVMList.SegmentInfo[0].ArriveDepartDetails.via)
                                };
                            }
                        }
                    },
                    serverFiltering: true
                })
}
});

});

[Neeraj]

I have found solution @stefan,

I used function to dynamically change

in template

<select class="request-via-multiselect" data-role="multiselect" data-max-selected-items="2"  data-value-primitive="true" data-item-Template="AirportTemplate" data-text-field="Code"  data-value-field="Code" data-bind="value: ArriveDepartDetails.via, source: onViaChange"></select>

In observable

onViaChange: function(e) {
                    debugger;
                    var viadata = e.ArriveDepartDetails.via;
                    return new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: rootUrl("GetData/GetCountry"),
                                dataType: "json",
                                data: function(e) {
                                    return {
                                        adddata: JSON.stringify(viadata)
                                    };
                                }
                            }
                        },
                        serverFiltering: true
                    });
                },

 

PLEASE LET ME KNOW IF I CAN IMPROVE CODE OR IS THERE ANY BETTER WAY

[Stefan]

Hello Neeraj,

The provided approach looks good.

Another option will be to use the setDataSource as this will also allow setting a dynamic template:

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#methods-setDataSource

Still, if any issue occurs with one of these approaches, please let us know and we will gladly assist.

Regards,
Stefan
Progress Telerik