date range filter in grid

6 posts, 0 answers
  1. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 25 Mar 2017 Link to this post

    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.

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 27 Mar 2017 Link to this post

    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.
  3. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 27 Mar 2017 in reply to Dimiter Topalov Link to this post

    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, left calendar is starting date, right calendar is ending date?
  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 29 Mar 2017 Link to this post

    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.
  5. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 03 Apr 2017 in reply to Dimiter Topalov Link to this post

    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 mvc
  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 05 Apr 2017 Link to this post

    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.
Back to Top