Date filter doesn't ignore the time

[Jyothi]

Hi,

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 need to display the time in the date object in the grid. 

How can I  display the date with the time, but filter with a date object without the time?

 

Regards,

Jyothi

[Dimiter Topalov]

Hi Jyothi,

Comparing dates with "equals" will always compare the whole date (including the time part). There are several approaches to achieve the desired behavior that come to mind, depending on the scenario requirements:

1) You can map the data such that there are two properties - one with the original date (with time), and one with the trimmed time - this way you can bind the Grid column to the trimmed date field for filtering purposes, but display the non-trimmed date via the cell templates

2) Use filter menu or the filter cell template to filter by range

3) Use some custom logic in the filterChange/dataStateChange event handler to modify the incoming date filter and change it into a composite filter descriptor with operators gte and lt, and logic "and":

{
  filters: [{field: 'dateField', operator: 'gte', value: the-incoming-filter-date-value}, {field: 'dateField', operator: 'lt', value: the-incoming-filter-date-value + 1 day}], logic: 'and'
}

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Jyothi]

Hi Dimiter,

Sorry, it is not clear to me as to how I can modify the filter in the filterChange method that I assign to the  (filterChange) = "filterChange($event)". 

Is there an example on the stackBlitz that I can refer to? That might make it easier to understand the concept.

 

Regards,

Jyothi

[Dimiter Topalov]

Hi Jyothi,

You can check out the following example I prepared:

https://stackblitz.com/edit/angular-eipg4v?file=app/app.component.ts

The points of interest are obtaining the date-field filter descriptor from the filters array of the incoming state (or filter if filterChange is used as opposed to dataStateChange), and if one is present, create a new filter based on the incoming one, and replace it, before processing the Grid data. This way the Grid data will be filtered by a complex filter (is equal to or after the beginning of the selected day, and is before the beginning of the next day).

Regards,
Dimiter Topalov
Progress Telerik

[Jyothi]

Hi Dimiter,

 

The example was very helpful, especially for someone who is just starting working with angular. It becomes tricky when more than few columns with date fields are involved in a kendo-grid.

Another approach we are considering is to not show  "equal to" in the filter drop down. Is there a way to achieve this?

Regards,

Jyothi

[Dimiter Topalov]

Hi Jyothi,

You can use the built-in kendo-grid-date-filter-cell component within a filter cell template, and specify which operators will be present in the dropdown, for example:

https://stackblitz.com/edit/angular-omqtfu-6zja8s?file=app/app.component.ts

Further details about the filter cell templates are available in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-configuration-components-for-filter-templates

However, based on our previous discussion, using a filter menu or a custom component allowing filtering by range between provided start and end dates, seem to be a better fit for the desired functionality, if customizing the incoming filter descriptors proves to be a not suitable workaround.

Regards,
Dimiter Topalov
Progress Telerik

[Jyothi]

Hi Dimiter,

"However, based on our previous discussion, using a filter menu or a custom component allowing filtering by range between provided start and end dates, seem to be a better fit for the desired functionality, if customizing the incoming filter descriptors proves to be a not suitable workaround."

I did go ahead and implement the custom filter. It works fine as long as it is a simple filter like you have in kendo site. Please image 1 singleFilter. It does not work with the filter we have in our application. See image 2 doubleFilter with AND/OR option.

I am using the same kendo-grid, so wondering why there is a difference in the look and feel of the filter in the example at stackBlitz vs what we have?

 

Regards,

Jyothi

 

 

[Jyothi]

I think I figured the display of single vs double filter. It is controlled by the filterable attribute.

[Jyothi]

Hi Dimiter,

I went over the documentation and I do not believe I still have found a solution for our problem. We are moving towards limiting the filter options we show in the drop down. I tried to  achieved this by using kendo-grid-date-filter-menu.

Here is part of  the code:

<ng-template kendoGridFilterMenuTemplate let-filter let-filterService="filterService" >
<kendo-grid-date-filter-menu
[filter]="filter"
[filterService]="filterService">
<kendo-filter-gte-operator></kendo-filter-gte-operator>
<kendo-filter-lt-operator></kendo-filter-lt-operator>
<kendo-filter-isnull-operator></kendo-filter-isnull-operator>
<kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>
</kendo-grid-date-filter-menu>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem >
   dataItem.XXXX_FINAL_CMP_DTM ? (dataItem.XXXX_FINAL_CMP_DTM | date: 'MM/dd/yyyy hh:mm a') : '--'}}
</ng-template>

 

Please the attached image. It does display only the operators listed. But when I use the filter, I get this error which I have no idea why.

ERROR TypeError: Cannot read property 'focus' of undefined
    at TabgroupComponent.push../src/app/common/commonWF/tabgroup/tabgroup.component.ts.TabgroupComponent.onTabSelect (tabgroup.component.ts:121)
    at Object.eval [as handleEvent] (TabgroupComponent.html:2)
    at handleEvent (core.js:10251)
    at callWithDebugContext (core.js:11344)
    at Object.debugHandleEvent [as handleEvent] (core.js:11047)
    at dispatchEvent (core.js:7710)
    at core.js:9190
    at SafeSubscriber.schedulerFn [as _next] (core.js:3563)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)

 

This error is totally unrelated to the tab components. Once I remove the ng-template that has the data that is to be displayed, the error goes away. But we need the data in data and time format and if null show --

How do we show only the operators that we want?  We need the extra ng-template tag to show the date in correct format with time. And if he date is null we display -- . 

Any help is greatly appreciated.

 

Regards,

Jyothi

[Svet]

Hi Jyothi,

Thank you for the additional details.

I added the demonstrated sample markup of the filter menu to the following example:
https://stackblitz.com/edit/angular-eipg4v-xxyhzj?file=app/app.component.ts

The functionality seems to be as expected and I am not getting any errors in the browser console.

Check the "First Ordered On" column:

<kendo-grid-column field="FirstOrderedOn" title="First Ordered On" width="240" >

  <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter let-filterService="filterService" >

    <kendo-grid-date-filter-menu

      [column]="column"

      [filter]="filter"

      [filterService]="filterService">

      <kendo-filter-gte-operator></kendo-filter-gte-operator>

      <kendo-filter-lt-operator></kendo-filter-lt-operator>

      <kendo-filter-isnull-operator></kendo-filter-isnull-operator>

      <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>

    </kendo-grid-date-filter-menu>

  </ng-template>

  <ng-template kendoGridCellTemplate let-dataItem >

    {{dataItem.FirstOrderedOn ? dataItem.FirstOrderedOn : '--'}}

  </ng-template>

</kendo-grid-column>

The only modification that I did was to bind the column as it is a requirement for all built-in filter-menu components as demonstrated in the following article:
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-configuring-built-in-filters

Indeed, using a kendo-grid-date-filter-menu component allows us to choose the operators that are needed and the kendoGridCellTemplate allows us to display any custom text. Both approaches are demonstrated in the provided example.

In case further assistance is required for this case, could you provide an isolated example demonstrating the reported error, so that we can inspect it and provide further feedback. Thank you in advance. Let me know in case I am missing something or any further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Jyothi]

Hi Svetlin,

Thanks for the quick response and the example. That did the trick. Very helpful.

Regards,

Jyothi