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

[Tim]

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?

[Georgi]

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:

• https://demos.telerik.com/aspnet-mvc/grid/remote-data-binding

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