CascadeFrom but do not enable combobox

2 posts, 0 answers
  1. Daniel Grünberger
    Daniel Grünberger avatar
    46 posts
    Member since:
    May 2008

    Posted 20 Dec 2012 Link to this post

    Hi,

    I'm using cascading comboboxes like in the Kendo UI samples.

    Everything works fine, but I don't want to enable the Checkbox once it is cacaded. I'd like to decide based on other facts if the Combobox whether should be enabled or not.

    So how can I disable the feature, that the second combobox is automatically enabled?

    Greets
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 21 Dec 2012 Link to this post

    Hello,

    Please try with below code snippet with http://try.kendoui.com/web/widget-initialization/1.


    JS
    function DisableSecondcombo()
    {
         var combobox = $("#products").data("kendoComboBox");
         
            combobox.enable(false);
    }
     
    $(document).ready(function() {
         
        function onChange() {
        setTimeout(function(){DisableSecondcombo()},1000);
            
        }
         
                        $("#categories").kendoComboBox({
                            placeholder: "Select category...",
                            close: onChange,
                            dataTextField: "CategoryName",
                            dataValueField: "CategoryID",
                            dataSource: {
                                type: "odata",
                                serverFiltering: true,
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                                }
                            }
                        });
     
                        var products = $("#products").kendoComboBox({
                            autoBind: false,
                            cascadeFrom: "categories",
                            placeholder: "Select product...",
                            dataTextField: "ProductName",
                            dataValueField: "ProductID",
                            dataSource: {
                                type: "odata",
                                serverFiltering: true,
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Products"
                                }
                            }
                        }).data("kendoComboBox");
     
                        var orders = $("#orders").kendoComboBox({
                            autoBind: false,
                            cascadeFrom: "products",
                            placeholder: "Select order...",
                            dataTextField: "Order.ShipCity",
                            dataValueField: "OrderID",
                            dataSource: {
                                type: "odata",
                                serverFiltering: true,
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
                                }
                            }
                        }).data("kendoComboBox");
                    });


    HTML
    <div id="example" class="k-content">
     
                <p>
                    <label for="categories">Categories:</label>
                    <input id="categories"/>
                </p>
                <p>
                    <label for="products">Products:</label>
                    <input id="products" disabled="disabled" />
                </p>
                <p>
                    <label for="orders">Orders:</label>
                    <input id="orders" disabled="disabled" />
                </p>
    </div>


    Thanks,
    Jayesh Goyani
  3. Kendo UI is VS 2017 Ready
Back to Top