No filter result using date column in ejs-grid | Angular

[Ervin van der Merwe]

Hi, 

I cannot get a result after applying date filter on ejs-grid.

 #myGrid [dataSource]='data' [allowFiltering]='true'[filterSettings]='FilterOptions'>

    

                field='startDate' format='yyyy-MM-dd' type='date' headerText='Start date' width=100 [filter]='filter'>

    

 

this.FilterOptions = {

      type: 'Menu',

    };

  filter: IFilter = {

    params:{

      format: 'yyyy-MM-dd'

    }

  };

The data is JSON:

createDate: "2020-04-01T12:16:33.113"

Thanks for all the help!

[Manivel Sellamuthu]

Hi Ervin, 

Greetings from Syncfusion support. 

Based on your code example you are providing the date value as string and to perform filtering in date column we need to provide the value in date object. 

To perform filtering on the date values the date string should be parsed into date Object. So we suggest you to parse the data before applying to the Grid. Please refer the below code example and sample for more information. 

[App.component.html] 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' [allowFiltering]='true'[filterSettings]='FilterOptions'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID'></e-column> 

            <e-column field='CustomerID' headerText='Customer Name'></e-column> 

            <e-column field='startDate' format='yyyy-MM-dd' type='date' headerText='Start date' [filter]='filter'></e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

[App.component.ts] 

import { Component, OnInit } from '@angular/core'; 

import { FilterSettingsModel, IFilter } from '@syncfusion/ej2-angular-grids'; 

import { DataUtil } from '@syncfusion/ej2-data'; 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html' 

}) 

export class AppComponent { 

    public data: Object[] = [ { 

        OrderID: 10248, CustomerID: 'VINET', startDate: "2020-04-01T12:16:33.113" 

    }, 

    { 

        OrderID: 10249, CustomerID: 'TOMSP', startDate: "2020-05-01T12:16:33.113" 

    },  

. . .  

    }]; 

    public FilterOptions: FilterSettingsModel = { 

      type: 'Menu', 

    }; 

    public filter: IFilter = { 

    params:{ 

      format: 'yyyy-MM-dd' 

    } 

  }; 

 

    ngOnInit(): void { 

                    //parse the data before applying to the Grid 

        this.data = DataUtil.parse.parseJson(this.data); 

    } 

} 

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

Please let us know if the solution helps. 

Regards, 

Manivel 

[Ervin van der Merwe]

Hi, 

Thats great! That was the problem thanks. Its working the way it should now.

[Manivel Sellamuthu]

Hi Ervin, 

We are glad that your problem was resolved. 

Please get back to us if you need further assistance. As always, we are happy to assist you. 

Regards, 

Manivel 

[Adesola]

Hello Manviel,

I am facing the same issue, I am parsing the data as you have up there while adding   format='yyyy-MM-dd' type='date'

<e-column

field="createdAt"

format="yyyy-MM-dd"

type="date"

[width]="100"

headerText="Date"

textAlign="Left"

></e-column>

in my html as well.

However, when I open up the page, all the data in the table disappears. It only displays the data when I remove this:  format='yyyy-MM-dd' type='date'

<e-column

field="createdAt"

[width]="100"

headerText="Date"

textAlign="Left"

></e-column>

but the date remains unformatted.


I have another question too, I could not find a how-to on the main website, please how do I make a server-side pagination call on the ejs data table?

[Sujith Kumar Rajkumar]

Hi Adesola, 

 

Greetings from Syncfusion support. 

 

We checked the reported problem with the latest packages but unfortunately were unable to reproduce it as the Grid data was properly displayed with the mentioned date formatted column. Please check the below sample for reference, 

 

Sample: https://stackblitz.com/edit/angular-152967-tnzcgj?file=app.component.html 

 

We suspect that you might be facing problem due to older Syncfusion packages or duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this and install the latest packages, 

 

• Delete package.lock.json file from your application.  
• Remove the @syncfusion package folder from the node_modules.
• Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
• Then install the NPM packages.

 

Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 

 

If problem still persists then please share us the following information to validate further on this, 

 

• Share us the entire Grid code file.
• Share us the module file of your application where the Grid related services are injected.
• Share us the package.json file of your application.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.

 

Regards, 

Sujith R