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

2 level dropdown in MVVM

1 Answer 156 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Neeraj asked on 30 Aug 2017, 12:14 PM

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{
                   transport: {
                       read: {
                           url: rootUrl("Fare/GetPricingTemplatestest"),
                           dataType: "json",
                           data: function(e) {
                               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>



<input data-role="dropdownlist" class="fare-template"
       data-text-field="Name" data-template="FareItemTemplate"
       data-value-field="Id" required="required"
       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"}]






















1 Answer, 1 is accepted

Sort by
Telerik team
answered on 01 Sep 2017, 11:40 AM
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.

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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question