I have data in JSON format, with all fields as strings. When I display it in the grid (I use kendo grid), it treat it as string, even if I create custom date field. So if I filter by existing date, then it do not match.
Note: I tried to convert source of data from string to date, it didn't fix filtering problem.
Please see images and code below, and git hub example. https://github.com/sam-klok/kendo-angular-app/tree/master/src/app/grid-second
export const customers = [{
'ContactName': 'Maria Anders',
'DOB': '01/31/2000'
}, {
'ContactName': 'Ana Bokov',
'DOB': '11/23/1974'
}, {
'ContactName': 'Antonio Moreno',
},
export class GridSecondComponent implements OnInit {
public gridData: any[] = customers;
<kendo-grid
[resizable]="true"
[kendoGridBinding]="gridData"
[filterable]="true"
[groupable]="true"
[sortable]="true"
[pageSize]="7"
[pageable]="true"
[height]="510">
<kendo-grid-column field="ContactName" title="Contact" [width]="120"></kendo-grid-column>
<kendo-grid-column field="DOB"
title="Date Of Birth" [width]="200"
format="{0:MM/dd/yyyy}">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-date-filter-cell
[column]="column"
[filter]="filter">
</kendo-grid-date-filter-cell>
</ng-template>
</kendo-grid-column>
</kendo-grid>
Per kendo-angular forum issue been in the using string instead of Date. I put a note, that I did conversion, but in my code, conversion was incorrect. When I corrected it, filter started to work. Array conversion below.
interface ICustomer{
ContactName: string;
DOB?: Date;
}
export const customerObjs = customers.map(
x=>({
ContactName: x.ContactName,
DOB: x.DOB ? new Date(x.DOB) : undefined
})
)
Some related docs are here:
https://www.telerik.com/forums/grid-date-filter-not-working
How to convert TypeScript array to generic array of class