Custom filters with wildcards

[John]

Hello,

I'm currently working on a project that requires each column in the kendo grid to contain a filter cell which will filter the rows using either the "contains" operator or wildcards. Essentially, I just need to add the option to search with wildcards instead of the "contains" logic when the application detects a wildcard in any of the column filter cells. I have attached a screenshot and example of my code for the page that is currently running the kendo grid. Everything is pretty much functioning as I need it except for the ability to filter by wildcards. Can you please point me in the direction to some examples of custom filtering that would help me add this functionality? Please let me know if you need any more information.

Thank you,

John

Code for MVC .cshtml page running kendo grid:


<div>
    @(Html.Kendo().Grid<Site>()
          .Name("SiteListGrid")
          .Columns(columns =>
          {
              columns.Bound(site => site.ReportId).Title("Report #").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false).InputWidth(65))).Width(85);
              columns.Bound(site => site.ClientName).Title("Client")
                  .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(110);
              columns.Bound(site => site.Year).Format("{0:yyyy}").Title("Year").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false).InputWidth(80))).Width(100);
              columns.Bound(site => site.RegionName).Title("Region").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(150);
              columns.Bound(site => site.MarketName).Title("Market").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(150);
              columns.Bound(site => site.SurveyTypeName).Title("Survey Type").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(150);
              columns.Bound(site => site.OpsReportName).Title("Ops Report Name").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(150);
              columns.Bound(site => site.ClientReportName).Title("Client Report Name").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(150);
              columns.Bound(site => site.Created).Title("Created mm/dd/yy").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(150);
              columns.Bound(site => site.Modified).Title("Modified mm/dd/yy").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(150);
              columns.Bound(site => site.NumberOfUsers).Title("# of Users").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false).InputWidth(80))).Width(100);
              columns.Bound(site => site.SiteStatus).Title("Site Status").Filterable(ftb => ftb.Enabled(false)).Width(120);
              columns.Bound(site => site.SiteId).ClientTemplate(
                  "<a href='/Site/Edit/#=SiteId#' type='icon' class='k-icon k-i-pencil' title='Edit' style='padding-right:2px'></a>" +
                  "<a href='/Site/Configure/#=SiteId#' type='icon' class='k-icon k-i-custom' title='Configure' style='padding-right:2px'></a>" +
                  "<a href='/Site/Copy/#=SiteId#' type='icon' class='k-icon k-i-search' title='View' style='padding-right:2px'></a>" +
                  "<a href='/Site/Copy/#=SiteId#' type='icon' class='k-icon k-i-restore' title='Copy' style='padding-right:2px'></a>"
                  ).Title("").Filterable(false).Width(100);
          })
          .Scrollable()
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(new[] { 25, 50, 100 })
              .ButtonCount(5)
              .PreviousNext(false))
          .HtmlAttributes(new { style = "height: 680px;" })
          .Sortable()
          .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
          .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("SiteList_Read", "Site"))
              .PageSize(50)
          ))
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var grid = $("#SiteListGrid").data("kendoGrid");

        // Apply "All" pageSize item to initial (bottom) pager toolbar
        addAllItemsSelectItem(grid);

        var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.children(".k-grid-header"));
        grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
        grid.element.height("").find(".pagerTop").css("border-width", "0 0 1px 0");

        // Apply "All" pageSize item to top pager toolbar
        addAllItemsSelectItem(grid);
    });

    function addAllItemsSelectItem(grid) {
        var pageSizeDropDown = grid.element.find("select").data("kendoDropDownList");
        pageSizeDropDown.dataSource.add({ text: "All", value: 1000000 });
        pageSizeDropDown.valueTemplate = function (e) {
            if (e.value === "1000000") {
                return "All";
            } else {
                return e.text;
            }
        };
    }
</script>

[Alexander Popov]

Hi John,

I am afraid that using wildcards is not supported out of the box. You can achieve similar results using a custom solution, for example:

1. Use the cell.template function to add your custom logic, for example: columns.Bound(p => p.ProductName).Filterable(x=>x.Cell(c=>c.Template("customFilter")));
2. Unbind the built-in change event of the e.element argument
3. Attach custom change event handler to the input that detects the wildcards and applies a correct filter to the Grid's DataSource

Regards,
Alexander Popov
Telerik

 

 

[Robert]

Can you show example?
Is it possible to apply filter an change visible rows grid on typing in filter cell?

[Alexander Popov]

Hi Robert,

Here is a proof-of-concept example illustrating the approach I previously suggested.
Also, instead of using the change event you can use the keyup event, which would allow you to filter the Grid as you type.

Regards,
Alexander Popov
Telerik