Kendo Cascading combo box with asp.net web methods. (Filter not happening)

[ravi]

hi, i am trying to use cascading combo box in asp.net. this is the code which i am tried. but problem is filter is not happening . 

<div id="example" class="k-content">

 

        <p>

            <label for="categories">Catergories:</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>

 

        <style scoped>

            .k-readonly

            {

                color: gray;

            }

        </style>

 

        <script>

            $(document).ready(function () {

                var productsDataSource = new kendo.data.DataSource({

                    serverFiltering: true,

                    transport: {

                        read: {

                            url: "WebForm1.aspx/GetProductsList", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

                            contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON

                            type: "POST" //use HTTP POST request as the default GET is not allowed for web methods

                            

                        }, parameterMap: function (options) {

                            return JSON.stringify(options);

                        }

                    }, schema: {

                        // the data which the data source will be bound to is in the "results" field

                        data: "d"

                    }

                });

 

                var ordersDataSource = new kendo.data.DataSource({

                    serverFiltering: true,

                    transport: {

                        read: {

                            url: "WebForm1.aspx/GetOrdersList", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

                            contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON

                            type: "POST"

                        }, parameterMap: function (options) {

                            return JSON.stringify(options);

                        }

                    }, schema: {

                        // the data which the data source will be bound to is in the "results" field

                        data: "d"

                    }

                });

 

            $("#categories").kendoComboBox({

                    placeholder: "Select category...",

                    dataTextField: "CategoryName",

                    dataValueField: "CategoryID",

                    dataSource: {

                        serverFiltering: true,

                        transport: {

                            read: {

                                url: "WebForm1.aspx/GetCategoryList", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

                                contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON

                                type: "POST" //use HTTP POST request as the default GET is not allowed for web methods

                            }, parameterMap: function (options) {

                                return JSON.stringify(options);

                            }

                        }, schema: {

                            // the data which the data source will be bound to is in the "results" field

                            data: "d"

                        }

 

                    },

                    change: function () {

                        var value = this.value();

 

                        if (value) {

                            value = parseInt(value);

                            if (isNaN(value)) {

                                return;

                            }

                            products.data("kendoComboBox").dataSource.filter({ field: "ProductID", operator: "eq", value: parseInt(value) });

                             

                            products.enable();

                        } else {

                            products.enable(false);

                        }

 

                        products.value("");

                        orders.value("");

                        orders.enable(false);

                    }

              })

 

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

                    autoBind: false,

                    placeholder: "Select product...",

                    dataTextField: "ProductName",

                    dataValueField: "ProductID",

                    dataSource: productsDataSource,

                    change: function () {

                        var value = this.value();

 

                        if (value) {

                            value = parseInt(value);

 

                            if (isNaN(value)) {

                                return;

                            }

 

                            ordersDataSource.filter({ field: "ProductID", operator: "eq", value: parseInt(value) });

                            orders.enable();

                        } else {

                            orders.enable(false);

                        }

 

                        orders.value("");

                    }

                }).data("kendoComboBox");

 

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

                    autoBind: false,

                    placeholder: "Select order...",

                    dataTextField: "OrderID",

                    dataValueField: "OrderID",

                    dataSource: ordersDataSource

                }).data("kendoComboBox");

            });

            </script>

    </div>

this are the c# methods to retrive the data. retrival is no problem. i need to filter the data.  

[WebMethod]

       public static IEnumerable GetCategoryList()

       {

           return dbContext.Categories.Select(e => new { CategoryID = e.CategoryID, CategoryName=e.CategoryName }).ToArray();

       }

 

       [WebMethod]

       public static IEnumerable GetProductsList(int filter)

       {

           return dbContext.Products.Select(e => new  { ProductID = e.ProductID, ProductName = e.ProductName, CategoryID = e.CategoryID }).ToArray();

       }

       [WebMethod]

       public static IEnumerable GetOrdersList(int filter)

       {

           return dbContext.Orders.Select(e => new OrderViewModel { OrderID = e.OrderID, OrderName = e.OrderID, ProductID = e.ProductID }).ToArray();

       }

 

       

   }

 

   public class ProductViewModel

   {

       public int ProductID { get; set; }

       public string ProductName{ get; set; }

       [ScriptIgnore]

       public int CategoryID { get; set; }

   }

   public class OrderViewModel

   {

       public int OrderID { get; set; }

       public int OrderName{ get; set; }

       [ScriptIgnore]

       public int ProductID { get; set; }

   }

kindly help me .