Cascading Combobox Problem

[Rolf]

Hey,

i get a problem with my cascading comboboxes. I can't get the value from the first combobox to put it in the data for the second datasource. So the datasource from combobox2 depends on the value from combobox1. I dont have a clue how to get the value out of combobox1.

I tried several things, but nothing worked for me.

The situation is mentioned below:

$("#categories").kendoComboBox({

                        placeholder: "Select category...",

                        dataTextField: "Category",

                        dataValueField: "Category",                    

                        dataSource: {

                            type: "json",

                            transport: {

                                    read: {

                                        url:"http://xxx/api/item/PostAllCategories",

                                        type:"POST",

                                    }

                            }

                        }      

                    }).data("kendoComboBox");

                     

                    var products = $("#products").kendoComboBox({

                        autoBind: false,

                        cascadeFrom: "categories",

                        placeholder: "Select product...",

                        dataTextField: "Product",

                        dataValueField: "Product",

                        dataSource: {

                            type: "json",

                            transport: {

                                    read: {

                                        url:"http://xxx/api/item/PostAllProducts",

                                        type:"POST",

                                        data:{

/*Here is the Problem, i need the value from categories here in the data field

  If i do it this way my cascading fails and the values aren't displayed in the combobox, so something is wrong here. value = valuefromcategories*/


                                            value: function() {

                                                        return $("#categories").data("kendoComboBox").value();

                                                    }  

                                        }

                                    }

                                }

                        }

                    })

Does anyone has an idea?

[Michelle]

I am having the same problem. I hope, I will get a good solution here. Thanks in advance! :-|

http://www.audiologic.net.au/

[Nohinn]

Do not define a 'value' parameter in the data.
When you set the cascadeFrom property, cascadeFrom: 'comboid'. It is sending along with all the other parameters the selected value from comboid.
I'm not sure about which name it uses to send it, maybe the one you use as dataValueField, so in your server-side method you should get this field and you will have the value. If it is not sending it with that name, you will have to take a lookg at any debugger like firebug on the network tab.

So, in the method you use to populate the products combo you have to look for 'Category' or (if you're working with asp.net mvc) set a parameter named Category.

[Nohinn]

I have inspected a bit the mechanism of cascadeFrom, what you would be receiving is quite a complex object:
- filter
- logic
- filters (array)
#field
#operator
#value (what you're looking for)

To make it easier you can use this:

var products = $("#products").kendoComboBox({

                        autoBind: false,

                        cascadeFrom: "categories",

                        placeholder: "Select product...",

                        dataTextField: "Product",

                        dataValueField: "Product",

                        dataSource: {

                            type: "json",

                            transport: {

                                    read: {

                                        url:"http://xxx/api/item/PostAllProducts",

                                        type:"POST"

                                    },

                                    parameterMap: function (obj, action) {

                                            var value = obj.filter.filters[0].value;

                                            obj = {};

                                            obj.Category = value;

                                            return obj;

                                   }

                            }

                        }

                    })

In this parameterMap function, instead of obj.Category use the name you're expecting to receive in your method.
So if you were working before with a value parameter instead of obj.Category = value, use obj.value = value

[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,
}]