Kendo Grid - How to create a Dropdown style column filter

11 posts, 0 answers
  1. Vijhay
    Vijhay avatar
    12 posts
    Member since:
    Apr 2018

    Posted 11 Jul Link to this post

    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

  2. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 12 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Vijhay
    Vijhay avatar
    12 posts
    Member since:
    Apr 2018

    Posted 12 Jul in reply to Eyup Link to this post

    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>

  4. Vijhay
    Vijhay avatar
    12 posts
    Member since:
    Apr 2018

    Posted 12 Jul in reply to Eyup Link to this post

    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.

  5. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 16 Jul Link to this post

    Hello Vijhay,

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

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Vijhay
    Vijhay avatar
    12 posts
    Member since:
    Apr 2018

    Posted 16 Jul in reply to Eyup Link to this post

    Thanks Eyup...

    Really appreciate your help...

    Vijhay Devarajan.

  7. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 18 Jul Link to this post

    Hello Vijhay,

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

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Vijhay
    Vijhay avatar
    12 posts
    Member since:
    Apr 2018

    Posted 18 Jul in reply to Eyup Link to this post

    Thanks Eyup.
  9. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 18 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Vijhay
    Vijhay avatar
    12 posts
    Member since:
    Apr 2018

    Posted 18 Jul in reply to Eyup Link to this post

    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.

  11. Eyup
    Admin
    Eyup avatar
    3535 posts

    Posted 20 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top