This is a migrated thread and some comments may be shown as answers.

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

0 Answers 110 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
ravi
Top achievements
Rank 1
ravi asked on 21 Jun 2012, 03:42 PM
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 . 

No answers yet. Maybe you can help?

Tags
ComboBox
Asked by
ravi
Top achievements
Rank 1
Share this question
or