How do you set the EnableRangeFiltering property when using Razor and Ajax client-side binding?

2 posts, 0 answers
  1. Tim
    Tim avatar
    1 posts
    Member since:
    Feb 2017

    Posted 20 Feb 2018 Link to this post

    I am trying to enable range filtering using the EnableRangeFiltering property on a Grid column. The ShippedDate column in the following example demonstrates how to do it using webforms and server side binding, but I need an example using Razor and Ajax client side binding.

    https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/basic-filtering/defaultcs.aspx?show-source=true

    Can you point me in the right direction?

  2. Georgi
    Admin
    Georgi avatar
    676 posts

    Posted 22 Feb 2018 Link to this post

    Hi Tim,

    Currently the Kendo Grid supports range filtration in menu filter mode (default filter mode) out of the box. For better understanding please refer to the following demo which demonstrates menu filter mode:


    In case the requirement is to use range filtering in row filter mode, it is possible to create a custom widget via Columns.Filterable.Fell.Template property and filter the data using the filter method of the data source.

    e.g.
    //Specify the filter widget template:
     
    columns.Bound(x => x.Field).Format("{0: MM/dd/yyyy}").Filterable(x => x.Cell(c => c.Template("betweenFilter")));
     
    //The filter template:
     
        function betweenFilter(args) {
            var filterCell = args.element.parents(".k-filtercell");
     
            filterCell.empty();
            filterCell.html(`
                        <span style="display:flex; justify-content:center;">
                         <span>From:</span>
                          <input  class='start-date'/>
                         <span>To:</span>
                          <input  class='end-date'/>
                        </span>`);
     
            $(".start-date", filterCell).kendoDatePicker({
                change: onChange
            });
            $(".end-date", filterCell).kendoDatePicker({
                change: onChange
            });
     
        }
     
        function onChange() {
            debugger
            var startDate = $("input.start-date").data("kendoDatePicker").value(),
                endDate = $("input.end-date").data("kendoDatePicker").value(),
                dataSource = $("#grid").data("kendoGrid").dataSource;
     
            var currentFilters = dataSource.filter();
     
            if (!currentFilters) {
                currentFilters = { filters: [], logic: 'and' }
            } else {
                currentFilters.filters = currentFilters.filters.filter(function (x) {
                    return x.field != 'Field'
                })
            }
     
            if (startDate || endDate) {
     
                startDate ? currentFilters.filters.push({ field: "Field", operator: "gte", value: startDate }) : "";
                endDate ? currentFilters.filters.push({ field: "Field", operator: "lte", value: endDate }) : "";
            }
     
            if (currentFilters.filters.length) {
     
                dataSource.filter(currentFilters);
            } else {
                dataSource.filter([]);
            }
        }

    Attached you will find a sample which demonstrates the above solution.


    Regards,
    Georgi
    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