Cascade combobox

2 posts, 0 answers
  1. John
    John avatar
    5 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2013 Link to this post

    I having a problem with the cascade combobox.  Here is the code with the json file.  I get undefined in the dropdown lists

                <div class="demo-section">
                    <h2>View Order Details</h2>
                        <label for="categories">Categories:</label><input id="categories" style="width: 300px" />
                        <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" />
                        <label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 300px" />

                    <button class="k-button" id="get">View Order</button>

                <style scoped>
                    .demo-section {
                        width: 460px;
                        padding: 30px;
                    .demo-section h2 {
                        text-transform: uppercase;
                        font-size: 1.2em;
                        margin-bottom: 30px;
                    .demo-section label {
                        display: inline-block;
                        width: 120px;
                        padding-right: 5px;
                        text-align: right;
                    .demo-section .k-button {
                        margin: 20px 0 0 125px;
                        color: gray;

                    $(document).ready(function() {
                        var categories = $("#categories").kendoComboBox({
                            placeholder: "Select category...",
                            dataTextField: "categories",
                            dataValueField: "id",
                            dataSource: {
                                type: "json",
                                serverFiltering: true,
                                transport: {
                                    read: "datasources/categories.json"


                        var products = $("#products").kendoComboBox({
                            autoBind: false,
                            cascadeFrom: "categories",
                            placeholder: "Select product...",
                            dataTextField: "ProductName",
                            dataValueField: "Productsku",
                            dataSource: {
                                type: "json",
                                serverFiltering: true,
                                transport: {
                                    read: "datasources/offerProducts.json"


        "categories": "Discount",
        "id": 1,
    }, {
        "categories": "Points",
        "id": 2,
    }, {
        "categories": "Member Status",
        "id": 3,
    }, {
        "categories": "Charity",
        "id": 4,
    }, {
        "categories": "Special Occasions",
        "id": 5,
  2. Dimiter Madjarov
    Dimiter Madjarov avatar
    2122 posts

    Posted 28 Mar 2013 Link to this post

    Hi John,

    The provided part of the code seems correct, but I am not aware what exactly is the JSON, returned for the child ComboBox. Here you could find detailed explanation of the Cascading Combo Boxes and the way they are configured. I also prepared the following simplified JS Bin demo which covers your scenario. I just added some sample data for the Child Combo.


    All the best,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top