Preselect item in multiselect mvvm

9 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 14 Aug Link to this post

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

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


    HTML for kendo in mvvm 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"]

    viaSource 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 additionaldata contains value that needs to be preselected on load.

     After getting response , the loading symbol doesnt go and filter also doesnt work .  If i remove the data section from kendo datasource it filters .

     

     

     

     

     

     

     

  2. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 14 Aug Link to this post

    i also checked this post . but didnt worked

    http://www.kendoui.io/kendo-ui/web/multiselect/how-to/preselect-items-using-mvvm
  3. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 14 Aug Link to this post

    i also checked this post . but didnt worked

    http://www.kendoui.io/kendo-ui/web/multiselect/how-to/preselect-items-using-mvvm
  4. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 14 Aug Link to this post

    It got solved !! i was not sending a property of object in response. i think in MVVM we need to send every property of object which is used thats it was not working 
  5. Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 15 Aug Link to this post

    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.
  6. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 16 Aug Link to this post

    Hello,
            There is another problem . i have multiple multiselect . and value is binded 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 i use same source for preloading other object values or ViaSource should be at AirRequestViewModel.AirItem.AirVMList.SegmentInfo[0].ArriveDepartDetails Level ?

     






  7. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 16 Aug Link to this post

    this is my asp.net mvc project 

    code in cshtml:
    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
                    })
    }
    });

    });
  8. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 18 Aug Link to this post

    I have found solution @stefan,

    I used function to dynamically change datasource

    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 object ,

    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

  9. Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 21 Aug Link to this post

    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.
Back to Top