This is a migrated thread and some comments may be shown as answers.

Preselect item in multiselect mvvm

8 Answers 588 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 14 Aug 2017, 09:17 AM

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

 

 

 

 

 

 

 

8 Answers, 1 is accepted

Sort by
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 14 Aug 2017, 09:39 AM
also checked this but worked

http://www.kendoui.io/kendo-ui/web/multiselect/how-to/preselect-items-using-mvvm
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 14 Aug 2017, 10:02 AM
also checked this but worked

http://www.kendoui.io/kendo-ui/web/multiselect/how-to/preselect-items-using-mvvm
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 14 Aug 2017, 12:18 PM
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 
0
Stefan
Telerik team
answered on 15 Aug 2017, 07:07 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 17 Aug 2017, 03:59 AM

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 ?

 






0
Neeraj
Top achievements
Rank 1
Veteran
answered on 17 Aug 2017, 04:09 AM
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
                })
}
});

});
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 18 Aug 2017, 12:11 PM

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

0
Stefan
Telerik team
answered on 21 Aug 2017, 05:42 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
MultiSelect
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Neeraj
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Share this question
or