Cascade combobox

[John]

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>
                <p>
                    <label for="categories">Categories:</label><input id="categories" style="width: 300px" />
                </p>
                <p>
                    <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" />
                </p>
                <p>
                    <label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 300px" />
                </p>

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

            <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;
                }
                .k-readonly
                {
                    color: gray;
                }
            </style>

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

                            }
                        }
                    }).data("kendoComboBox");

                    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"
                            }
                        }
                    }).data("kendoComboBox");


JSON

[{
    "categories": "Discount",
    "id": 1,
}, {
    "categories": "Points",
    "id": 2,
}, {
    "categories": "Member Status",
    "id": 3,
}, {
    "categories": "Charity",
    "id": 4,
}, {
    "categories": "Special Occasions",
    "id": 5,
}]

[Dimiter Madjarov]

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