Cascading with dropdownlist

2 posts, 1 answers
  1. David
    David avatar
    4 posts
    Member since:
    Mar 2012

    Posted 26 Feb 2013 Link to this post

    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
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Feb 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top