date range filter in grid

[GridLover]

I am using ASP.NET MVC for grid. @(Html.Kendo().grid().

 

I have a column, which is a date data type. I want to have a date range filter for this column. I cannot find any related tutorial about it. Please advise.

[Dimiter Topalov]

Hi,

The default Grid filter menu provides two inputs that can be used in a combination with the suitable operators and logic from the dropdowns, so you can build a rule for the date column like "Is after ... (start date)" AND "Is before ... (end date)":

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

The example is also available in the Sample Application, coming with your installation package.

I hope this helps, but if I am missing something, please describe the scenario and the desired functionality in further details, so I can try providing a more to-the-point suggestion, if one is available. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress

[GridLover]

Hi Dimiter,

"The default Grid filter menu provides two inputs that can be used in a combination with the suitable operators and logic from the dropdowns, so you can build a rule for the date column like "Is after ... (start date)" AND "Is before ... (end date)":"

I know this works. But this UI seems like not intuitive. Do you have a method that can pop up two calendars for users to filter the date range, calendar is starting date, calendar is ending date?

[Dimiter Topalov]

Hi,

The desired layout is not supported out-of-the-box, but can be achieved via some custom implementation. A possible approach is to handle the Grid filterMenuInit event, and manipulate the controls in the container, e.g.:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Events(e => e.FilterMenuInit("onFilterMenuInit"))
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

<script>
    function onFilterMenuInit(e) {
        var ddl1 = e.container.find('[data-role="dropdownlist"]').first().data('kendoDropDownList');
        var ddl2 = e.container.find('[data-role="dropdownlist"]').last().data('kendoDropDownList');
        var logicDDL = $(e.container.find('[data-role="dropdownlist"]')[1]).data('kendoDropDownList');

        ddl1.value('gte');
        ddl1.trigger('change');
        ddl2.value('lte');
        ddl2.trigger('change');
        ddl1.wrapper.hide();
        ddl2.wrapper.hide();
        logicDDL.wrapper.hide();
    }
</script>

The code above will set the values of the dropdowns such that the filter that will be applied will be "Is after or equal to" the date, selected in the first DatePicker, and "Is before than or equal to" the date, selected from the second DatePicker. The default logic is "And". All dropdowns are then hidden, so the user will not be able to select different operators and logic.

Here is the API reference for the used methods and events:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filterMenuInit

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[GridLover]

Hi, I used your sample code, but there is still one date picker for me to choose, instead of two as you mentioned. Can you please attach a sample working project? I am using asp.net

[Dimiter Topalov]

Hello,

I general, we do not send full-blown sample projects, but you can follow this steps to observe the behavior I was describing in my previous post:

1) Run the Sample application

2) Navigate to Views --> grid --> remote_data_binding.cshtml and replace the code with the one from my previous post

3) Run the application, and open the filter menu for the Order Date column

https://www.screencast.com/t/opV4neEwQc

A possible reason for you to see one DatePicker only is the filterable.extra option to be set to false. Also, you can apply the custom logic, required for the OrderDate column only conditionally to avoid applying it to the other columns' filter menus also, e.g.:

function onFilterMenuInit(e) {
        if (e.field === 'OrderDate') {
            var ddl1 = e.container.find('[data-role="dropdownlist"]').first().data('kendoDropDownList');
            var ddl2 = e.container.find('[data-role="dropdownlist"]').last().data('kendoDropDownList');
            var logicDDL = $(e.container.find('[data-role="dropdownlist"]')[1]).data('kendoDropDownList');

            ddl1.value('gte');
            ddl1.trigger('change');
            ddl2.value('lte');
            ddl2.trigger('change');
            ddl1.wrapper.hide();
            ddl2.wrapper.hide();
            logicDDL.wrapper.hide();
        }
    }

Regards,
Dimiter Topalov
Telerik by Progress