[Solved] 2 level dropdown in MVVM

[Neeraj]

Hello, am trying to achieve 2 level drop   In below code if i change group: [{field: "FareOwner"}],  to group: [{field: "FareOwner"},{field: "Description"}],
          I get error before template screen renders and item text in dropdownList is shown as undefined . Only FareOwner ('Agent' or 'Customer' is shown).



My datasource code:

PricingTemplateSource: new kendo.data.DataSource({
                   transport: {
                       read: {
                           url: rootUrl("Fare/GetPricingTemplatestest"),
                           dataType: "json",
                           data: function(e) {
                               debugger;
                               return {
                                   optionFilters: JSON.stringify(AirPricingWoPNRViewModel.Item.AirPricingVM.OptionFilters),
                                   validatingCarrier: JSON.stringify(AirPricingWoPNRViewModel.Item.AirPricingVM.ValidatingCarrier)

                               };
                           }

                       }
                   },
                   group: [{field: "FareOwner"}],
                   serverFiltering: true
               }),

 

template :

<script id="FareItemTemplate" type="text/x-kendo-template">

    #debugger #
    <div class="k-state-default">
        <div class="bluecolor"> #: data.Name # </div>
        #if(data.Remark!= null){#
        <div style="font-size:11px;"> #: data.Remark # </div>
        #}#
    </div>

 

 

<input data-role="dropdownlist" class="fare-template"
       data-text-field="Name" data-template="FareItemTemplate"
       data-value-field="Id" required="required"
       data-value-primitive="true"
       data-bind="value: FareTemplateID,
               source: PricingTemplateSource " />

 

Source Data :

[{"Id":10446,"Name":"FXP/R,VC-SQ","Remark":null,"FareOwner":"Agent","Description":"Published"},{"Id":10447,"Name":"FXP/R,VC-SQ","Remark":"Full IATA Publish Fare","FareOwner":"Agent","Description":"Published"},{"Id":10481,"Name":"Default FXP","Remark":null,"FareOwner":"Agent","Description":"Published"},{"Id":10530,"Name":"FXP/RSEA,U,VC-SQ","Remark":null,"FareOwner":"Agent","Description":"Marine"},{"Id":10531,"Name":"FXP/RSEA,U,VC-SQ","Remark":null,"FareOwner":"Agent","Description":"Offshore"},{"Id":10547,"Name":"FXP/R,VC-SQ","Remark":"Test","FareOwner":"Agent","Description":"Published"},{"Id":10548,"Name":"Test Customer","Remark":"Test","FareOwner":"Customer","Description":"Published"},{"Id":10559,"Name":"FXP/RSEA,U","Remark":null,"FareOwner":"Agent","Description":"Marine"}]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Dimitar]

Hello Neeraj,

When you group by multiple fields, the DataSource creates a hierarchy and is trying to display it in the DropDownList. This however is not a supported scenario in the DropDownList widget.

You can achieve multiple grouping in Kendo UI widgets, which support displaying hierarchical data such as the Kendo UI Grid, TreeView and TreeList widgets.

I would also suggest you to log this as a feature request in the Kendo UI Feedback Portal. This way, based on the demand for such a feature, it can be considered for implementation in a future release of Kendo UI.

Regards,
Dimitar
Progress Telerik