Cascading with dropdownlist

[David]

Hi.

I have reviewed the documentation dropdownlist and I have not been able to resolve the following situation:

My web service returns me a JSON object of the form as shown in the image. As you can see is what companies have branches and my json object already has reinforced that. But I tried to do with the dropdownlist and yet I can not. Only companies achieving load but not the children belonging to them. This is my code:

HTML

<div id="selectMenu" data-role="view"  data-title="Emp-Suc" data-init="selectInit">

        <div data-role="header">

            <div data-role="navbar">

                <a data-role="backbutton"  href="#:back" data-align="left">Atras</a>

                Emp-Suc

            </div>

 

        </div>

 

        <ul data-role="listview" data-style="inset">

            <li>

                Compañia

                <select  id="company">

                </select>

                 

            </li>

            <li>

                <select id="branch">

                     

                </select>

                Sucursal

 

            </li>

        </ul>

    </div>

javascript

function selectInit(){

     

    $("#company").kendoDropDownList({

        dataSource: selectMenu_model.getUserBranch(selection_view_model),

        dataTextField: "Company",

        dataValueField: "CompanyId"

    });    

 

    $("#branch").kendoDropDownList({

        cascadeFrom: "company",

        dataTextField: "Branch.Name",

        dataValueField: "Branch.BranchId",

        dataSource: selectMenu_model.getUserBranch(selection_view_model),

        autoBind: false

    });

 

     

     

}

Clarified that the datasource has the answer as show in the picture !


I would appreciate a response. Thanks

[Alexander Valchev]

Hello David,

The data you try to use cannot be loaded from the DataSource of the second DropDown widget. The DataSource component is designed to work with flat (not nested) data and cannot load the inner "Branch" data array.

I suggest you to change the data format into something similar to:

companies = [
    {
        "Company": "Company 1",
        "CompanyId": "c1"
    },
    {
        "Company": "Company 2",
        "CompanyId": "c2"
    }
],
branches = [
    {
        "BranchId": "c1-b1",
        "Name": "c1-Name 1",
        "CompanyId": "c1"
    },
    {
        "BranchId": "c2-b1",
        "Name": "c2-Name 1",
        "CompanyId": "c2"
    },
    {
        "BranchId": "c2-b2",
        "Name": "c2-Name 2",
        "CompanyId": "c2"
    }
];

For convenience I prepared a small example: http://jsbin.com/ajabor/2/edit
I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team