Date filter doesn't ignore the time

5 posts, 0 answers
  1. Dana
    Dana avatar
    1 posts
    Member since:
    Mar 2013

    Posted 28 Mar 2013 Link to this post

    When filtering on a date column in the grid, the dates are filtered by time as well as by date. This creates a problem when trying to filter with "equals to". 
    I can easily remove the time from the date object in the grid and this fixes the filtering.
    However, I might need to display the time in the date object in the grid. 

    How can I have the dates filtered while ignoring the time, or alternatively display the date with the time, but filter with a date object without the time?

    Thanks
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 29 Mar 2013 Link to this post

    Hello,

    I think it is not possible or very hard to achieve this thing in in-built filter functionality.

    Please try with Custom Filter.

    http://www.kendoui.com/forums/ui/grid/grid-filters-with-date-and-time.aspx#zyQCkkICqE6c-MSzxNvGcg
    http://www.kendoui.com/forums/mvc/grid/how-to-implement-a-custom-filter.aspx#2296030

    Thanks.
    Jayesh Goyani
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 01 Apr 2013 Link to this post

    Hello Dana,

    As @Jayesh correctly said, such feature is not supported out of the box. By default DataSource filters the underlying data, if the value of your date field contains time information, it will not be ignored.

    The DataSource provides opportunity for defining a custom filter operator:
    dataSource.filter({ field: "orderId", operator: function(input) {
        //your logic
    }, value: 10428 });

    It would be easier to use this approach with external filter menu. The build-in one does not provide opportunity for customizing the operators like shown above.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 21 Jun 2018 Link to this post

    I have the same problem.

    this is my grid and I want to filter only by the date , can you please give me more details how to do it?

     @(Html.Kendo().Grid<ServicingMoneyManagerUI.Models.TransactionViewModel>()
                          .Name("TransactionGrid")
                          .Columns(columns =>
                          {
                              columns.Bound(c => c.ACHData.ACHID).Title("ACH ID").Width(140);
                              columns.Bound(c => c.TransactionDate).Title("Date").Format("{0: MM/dd/yyyy}").Width(110);
                              columns.Bound(c => c.ACHData.Amount).Title("Amount").Width(120).Format("{0:c}");
                              columns.Bound(c => c.UserName).Title("User Name").Width(130);
                              columns.Bound(c => c.ClearTouchAccountToWorkWith).Title("Cleartouch").Width(140);
                              columns.Bound(c => c.ACHData.ToName).Title("From Name").Width(140);
                              columns.Bound(c => c.TransactionState).Title("Status").Width(140);
                              columns.Bound(c => c.ACHData.Description).Title("Comment").Width(140);
                              //columns.Command(command => { command.Edit().CancelText(" ").UpdateText(" ").Text(" "); }).Width(100);

                          })
               //.HtmlAttributes(new { style = "height: 70%;" })

               .Filterable()
               .Editable(editable => editable.Mode(GridEditMode.InLine))
               .ToolBar(toolbar =>
               {

                   toolbar.Custom().HtmlAttributes(new { id = "btn-print" }).Text("PRINT TRANSACTIONS");
                   toolbar.Pdf();
                   toolbar.Excel();

               })
               .Excel(excel => excel
                              .AllPages(true)
                              .FileName("TransactionsExport.xlsx")
                              .Filterable(true)
                              .ForceProxy(true)
                              .ProxyURL(Url.Action("Excel_Export_Save", "Home")))
              .Pageable(pager => pager
                                .Refresh(true)
                                .PageSizes(true)
                                .PageSizes(new int[] { 6, 15, 20 })
                                .ButtonCount(5))
              .Sortable(sortable =>
              {
                  sortable.SortMode(GridSortMode.MultipleColumn)
                  .Enabled(true);
              })
              .DataSource(dataSource => dataSource
                                       .Ajax()
                                       .PageSize(20)
                                       .Model(model =>
                                       {
                                           model.Id(item => item.ID);
                                           //model.Field(m => m.ACHData.ACHID).Editable(false);
                                       })
                                       .Read(read => read.Action("GetTransactions", "Transaction"))
                                       /*.Update(update => update.Action("UpdateProduct", "Product"))*/)


               .Selectable(selectable => selectable
                                         .Mode(GridSelectionMode.Multiple)
                                        .Type(GridSelectionType.Row))
               .Events(events => events.Change("OnSelectTransaction"))
               .Scrollable()
               .Pdf(pdf => pdf
                          .AllPages()
                          .AvoidLinks()
                          .PaperSize("A4")
                          .Scale(0.8)
                          .Margin("1cm", "1cm", "1cm", "1cm")
                          .Landscape()
                          .RepeatHeaders()
                          .TemplateId("page-template")
                          .FileName("TransactionsExport.pdf")
                          .ForceProxy(true)
                          .ProxyURL(Url.Action("Pdf_Export_Save", "Home")))

                )

    Thanks!

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1079 posts

    Posted 25 Jun 2018 Link to this post

    Hello, Michael,

    To filter only by date, there are few options:

    - Create a new field which will have the time as 00:00:00 
    OR
    - Use the filter event of the grid to modify the filters before they are sent to the server
    OR
    - Modify the filters on the server

    We have a JavaScipt demo which shows the first two of these approaches. Let me know which approach seems to meet your expectations and if you need any assistance with its implementation.

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/filter-by-date

    In my opinion, if the time should be ignored, the easiest and cleanest approach would be to use the extra field in the view model and modify the time portion on the server.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 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