Cascading Combobox Problem

5 posts, 0 answers
  1. Rolf
    Rolf  avatar
    1 posts
    Member since:
    Oct 2012

    Posted 05 Sep 2012 Link to this post

    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?
  2. Michelle
    Michelle avatar
    1 posts
    Member since:
    Sep 2012

    Posted 06 Sep 2012 Link to this post

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

    http://www.audiologic.net.au/
  3. Kendo UI is VS 2017 Ready
  4. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 06 Sep 2012 Link to this post

    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.
  5. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 06 Sep 2012 Link to this post

    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
  6. 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>
                    <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,
    }]





Back to Top
Kendo UI is VS 2017 Ready