angulartypescriptkendo-gridkendo-ui-angular2

How to fix date field filter in the angular-kendo grid?


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>

enter image description here

enter image description here


Solution

  • 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
        })
    )
    

    enter image description here

    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