Help with customizing grid's filter menus

[Iryna]

I'm currently redesigning the filter menus in our MVC ASP.NET Core project. As of now, they all have the default menu:

I would like to customise the menus according to the columns' data types - have date range pickers for dates, a slider from min to max value for numbers, etc. The main point is to make the process simpler - so the users only need to input a few characters/choose a date/slide to the right number, instead of filling out this complicated configuration.

Some of such components are provided by kendo (e.g. DateRangePicker), others aren't (e.g. the above-mentioned slider; at least I didn't find anything like it), but could be implemented with a custom function. Either way, I can't seem to be able to override the default filter menu.

The only promising suggesstion on how to achieve something like this that I found was:

grid.Columns(c => c.Bound(item.Name)
       .Filterable(ftb => ftb.UI("datePickerFilter"))

function datePickerFilter(element) {
    element.kendoDateRangePicker({
        messages: {
            startLabel: "Check-In",
            endLabel: "Check-Out"
        },
        format: "MM/dd/yyyy"
    });
}

Unfortunately, it did not work. So any help, advice or personal experience with a similar issue will be very much appreciated :) Thanks.

[Anton Mironov]

Hi Iryna,

Thank you for the image, code snippets, and details provided.

The Telerik UI Grid's filter can be customized by using custom approaches.

The following demo represents how to make the needed changes. The source code for the implementation is stored in the View Source tab:

• https://demos.telerik.com/aspnet-core/grid/filter-menu-customization

Additional information about the Filtering configuration of the Grid can be found in the following article:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/filtering
  

Kind Regards,
Anton Mironov
Progress Telerik