This is a migrated thread and some comments may be shown as answers.

date range filter in grid

5 Answers 623 Views
Grid
This is a migrated thread and some comments may be shown as answers.
GridLover
Top achievements
Rank 1
GridLover asked on 25 Mar 2017, 09:27 PM

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.

5 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 27 Mar 2017, 03:06 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
GridLover
Top achievements
Rank 1
answered on 28 Mar 2017, 04:10 AM
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?
0
Dimiter Topalov
Telerik team
answered on 29 Mar 2017, 02:19 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
GridLover
Top achievements
Rank 1
answered on 04 Apr 2017, 04:53 AM
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
0
Dimiter Topalov
Telerik team
answered on 05 Apr 2017, 01:29 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
GridLover
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
GridLover
Top achievements
Rank 1
Share this question
or