2 level dropdown in MVVM

2 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    82 posts
    Member since:
    May 2015

    Posted 30 Aug 2017 Link to this post

    Hello, i am trying to achieve 2 level drop down .  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) {
                                   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"}]






















  2. Dimitar
    Dimitar avatar
    304 posts

    Posted 01 Sep 2017 Link to this post

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