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

Cascading with dropdownlist

1 Answer 62 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 26 Feb 2013, 10:10 PM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 28 Feb 2013, 05:20 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ComboBox
Asked by
David
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or