Grid Foreign Key DropDownList with Filter

Environment

Product Version 2019.1.220
Product Grid for ProgressĀ® Kendo UIĀ®

Description

How can I enable the filter of the foreign key column DropDownListEditor?

Solution

You can add the filter option on the edit event of the Kendo UI Grid when the automatically generated Kendo UI DropDownList is initialized.

     <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js" type="text/javascript"></script>
    <div id="example">
      <div id="grid"></div>

      <script>
        var categories = [{
          "value": 1,
          "text": "Beverages"
        },{
          "value": 2,
          "text": "Condiments"
        },{
          "value": 3,
          "text": "Confections"
        },{
          "value": 4,
          "text": "Dairy Products"
        },{
          "value": 5,
          "text": "Grains/Cereals"
        },{
          "value": 6,
          "text": "Meat/Poultry"
        },{
          "value": 7,
          "text": "Produce"
        },{
          "value": 8,
          "text": "Seafood"
        }];

        $(document).ready(function () {
          var dataSource = new kendo.data.DataSource({
            pageSize: 20,
            data: products,
            autoSync: true,
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { editable: false, nullable: true },
                  ProductName: { validation: { required: true} },
                  CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
                  UnitPrice: { type: "number", validation: { required: true, min: 1} }
                }
              }
            }
          });

          $("#grid").kendoGrid({
            dataSource: dataSource,
            filterable: true,
            sortable:true,
            groupable: true,
            pageable: true,
            height: 540,
            edit: function(e){
              var ddl = e.container.find("[data-role='dropdownlist']").data("kendoDropDownList");
              if(ddl){
                ddl.setOptions({filter: "contains"});
              }
            },
            toolbar: ["create"],
            columns: [
              { field: "ProductName", title: "Product Name", filterable:false },
              { field: "CategoryID", width: "200px", values: categories, title: "Category", filterable: { multi: true, search:true } },
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "200px", filterable:false},
              { command: "destroy", title: " ", width: "150px"}],
            editable: true
          });
        });
      </script>
    </div>
In this article
Not finding the help you need? Improve this article