Kendo Grid - How to create a Dropdown style column filter

[Vijhay]

Hi All

 

I'm using kendo grid where my data source is a dynamically generated HTML table. I would like to understand how I can generate a dropdown like filter for a particular column, where the user can select the data to be filtered rather than typing it.

 

Appreciate your inputs.

 

Thanks

Vijhay Devarajan

[Eyup]

Hello Vijhay,

Generally, you can use the built-in Multi CheckBoxes filtering of the grid:
https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes

If you prefer generating a combo with options, you can use the following approach to achieve that:

filterable: {
     ui: cityFilter
}

Here is a live sample:
https://demos.telerik.com/kendo-ui/grid/filter-menu-customization

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Vijhay]

Hi Eyup

For some reason the kendo grid does not like columns[] if the datasource is a HTML table, so I don't think I can use the methodology you recommended. Below is my code, is there a way I can turn-on the built-in multi-checkboxes of the combo box (drop down style) filtering?

 

<script>
 $(document).ready(function($){
         $("#grid").kendoGrid({
   dataSource: { },
   toolbar: ["excel"],
                 excelExport: function(e) {
           var rows = e.workbook.sheets[0].rows;
 
           for (var ri = 1; ri < rows.length; ri++) {
             var row = rows[ri];
                for (var ci = 0; ci < 1; ci++) {
                   var cell = row.cells[ci];
                   if (cell.value) {
                     // Use jQuery.fn.text to remove the HTML and get only the text
                     cell.value = $(cell.value).text();
                     // Set the alignment
                     cell.hAlign = "right";
      }
     }
           }
        }, 
   excel: {
                  fileName: "OverallDashboard.xlsx",
                  filterable: true
              },
   sortable: true,
   filterable: { mode: "row" },
   columnMenu: true,
   resizable: true,
   scrollable: true,
   reorderable: true,
                    });
                });
  function contractTypeFilter(element) {
                    element.kendoDropDownList({
                        dataSource: ContractType,
                        optionLabel: "--Select Value--"
                    });
                }
</script>

 

<TABLE id="grid">
<colgroup>
 <col style="width:130px" />
 <col style="width:130px" />
 <col style="width:130px" />
 <col style="width:160px" />
 <col style="width:160px" />
        <col style="width:300px" />
 <col style="width:200px" />
 <col style="width:150px" />
        <col style="width:200px" />
 <col style="width:140px" />
 <col style="width:225px" />
</colgroup>

<THEAD>
<TR>
 <TH data-field="CMSID" data-filterable="true" data-template="<strong>#=CMSID#</strong>">CMSID</TH>
 <TH data-field="Initiator" data-filterable="true">Initiator</TH>
 <TH data-field="Assignee" data-filterable="true">Assignee</TH>
 <TH data-field="StartDate" data-type="date" data-template="#=kendo.format('{0:MM/dd/yyyy}',StartDate)#" data-filterable="true">Start Date</TH>
 <TH data-field="TaskDate" data-type="date" data-template="#=kendo.format('{0:MM/dd/yyyy}',TaskDate)#" data-filterable="true">Task Date</TH>
 <TH data-field="TaskName" data-filterable="true">Task Name</TH>
 <TH data-field="Vendor" data-filterable="true">Vendor Name</TH>
 <TH data-field="Value" data-type="number" data-filterable="true">Value</TH>
 <TH data-field="CostCenter" data-filterable="true">Cost Center</TH>
 <TH data-field="Department" data-filterable="true">Department</TH>
 <TH data-field="ContractType" filterable="true">Contract Type</TH>
</THEAD>

[Vijhay]

Hi Eyup

Lets make it very simple, How can you enable dropdown style filter from this particular example? The data source is a HTML table.

https://dojo.telerik.com/iBAhuSeL

Thanks

Vijhay Devarajan.

[Eyup]

Hello Vijhay,

We will modify the dojo sample as requested and send it to you when readyy.

Regards,
Eyup
Progress Telerik

[Vijhay]

Thanks Eyup...

Really appreciate your help...

Vijhay Devarajan.

[Eyup]

Hello Vijhay,

This is to let you know that I will send you a working sample shortly.

Regards,
Eyup
Progress Telerik

[Vijhay]

Thanks Eyup.

[Eyup]

Hi Vijhay,

You can achieve this requirement using the setOptions method provided by the grid:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions

Here is a working version of the modified live dojo sample as promised:
https://dojo.telerik.com/iBAhuSeL/10

Please give it a try and let me know if it works for you.

Regards,
Eyup
Progress Telerik

[Vijhay]

Thanks Eyup!! This really helps, two quick questions?

1. I see you have hard-coded the car make array. How do I make this dynamic when I'm not sure what's coming from the database

2. There is a find() function in the code that says:

find("th a.k-link"). Can you please elaborate what you mean by "a.k-link"?

Thanks

Vijhay Devarajan.

[Eyup]

Hi Vijhay,

I'm glad the provided solution has proven helpful. Let me address the remaining questions:

1. You can check various demos of the dropdownlist component to see how to bind it to data coming from the database:
https://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource

2. The anchor element with class l-link is generated and added to the th header cell of the grid when the sortable property is enabled. Basically, it is the link tool which the user can click in order to sort a given column. If the sortable property is not enabled, the header text would be added directly to the th cell element instead.

Regards,
Eyup
Progress Telerik