Filtering data based on a Data type column

[GABRIELE COSSU]

Dear Sirs,

I am using an Angular Grid component to show a large amount of records (several thousand).

The number and the name of the columns is dynamically determined during the data source parsing (the application calls a web service that generates a JSON array).

3 columns are alway present in the datasource: oid (unique id), byteSize and createdAt that is the creation date of the record.

During the parsing of the datasource I use this piece of code to create a array of columns

if (documentList && documentList.length) {

Object.getOwnPropertyNames(documentList[0]).map(ele => {

if (ele !== '') {

let theType = 'string';

let theFormat = null;

let theTextAlign = 'Left';

switch (ele) {

case 'byteSize':

theType = 'Number';

theFormat = 'N0';

theTextAlign = 'Right';

newColumns.push({

field: ele, headerText: ele, width: '50', visible: true,

type: theType,

textAlign: 'Right',

allowReordering: true, isPrimaryKey: false,

});

break;

case 'createdAt':

newColumns.push({

field: ele, headerText: ele, width: '50', visible: true,

type: 'date',

format: 'dd/MM/yyyy',

allowReordering: true, isPrimaryKey: false,

});

break;

default:

newColumns.push({

field: ele, headerText: ele, width: '50', visible: ele === 'oid' ? false : true,

type: theType,

format: theFormat, textAlign: theTextAlign,

allowReordering: true, isPrimaryKey: ele === 'oid' ? true : false,

});

break;

}

}

});

At the end of parsing the grid is loaded with the list of columns

for (const elemento of newColumns) {

(this.grid.columns as Column[]).push(elemento);

this.grid.refreshColumns();

The grid definition is the following

<ejs-grid #grid [dataSource]='gridData' width='100%' height='300px' [allowPaging]="true" allowSorting='true'

[allowFiltering]='true' [allowExcelExport]='true' [filterSettings]='filterOptions' [pageSettings]='pageSettings'

[allowReordering]='true' [allowResizing]='true' [showColumnChooser]='true' [showColumnMenu]='false'

[enablePersistence]='false' [allowGrouping]="false" (created)="gridCreated($event)"

(dataBound)='dataBound()' (recordClick)='cellSelected($event)' (rowSelected)='rowSelected($event)'

(rowDeselected)='rowDeselected($event)' (columnMenuOpen)='columnMenuOpen($event)'

(beforeOpenColumnChooser)='beforeOpenColumnChooser($event)' (actionComplete)='complete($event)'

(actionBegin)='gridActionBegin($event)' (actionFailure)='gridException($event)'>

</ejs-grid>

Filter options

this.filterOptions = {

type: 'Menu'

};

The result is this

When I enable the filter on this column I can select a date from a calendar

but if I select a date present in the data source, the filter returns 0 record.

If I activate the Excel filter option

this.filterOptions = {

type: 'Excel'

};

  another problem occours:

vendor.js:19288 ERROR Error: Uncaught (in promise): TypeError: value.getDate is not a function

TypeError: value.getDate is not a function

    at vendor.js:86992

    at ValueFormatter.push../node_modules/@syncfusion/ej2-grids/src/grid/services/value-formatter.js.ValueFormatter.toView (vendor.js:178444)

    at ExcelFilterBase.push../node_modules/@syncfusion/ej2-grids/src/grid/common/checkbox-filter-base.js.CheckBoxFilterBase.createFilterItems (vendor.js:164732)

    at ExcelFilterBase.push../node_modules/@syncfusion/ej2-grids/src/grid/common/checkbox-filter-base.js.CheckBoxFilterBase.processDataSource (vendor.js:164618)

    at ExcelFilterBase.push../node_modules/@syncfusion/ej2-grids/src/grid/common/checkbox-filter-base.js.CheckBoxFilterBase.dataSuccess (vendor.js:164599)

    at vendor.js:164560

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:399)

    at Object.onInvoke (vendor.js:41542)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:398)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:158)

    at resolvePromise (polyfills.js:860)

    at polyfills.js:925

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:431)

    at Object.onInvokeTask (vendor.js:41533)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:430)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:203)

    at drainMicroTaskQueue (polyfills.js:609)

    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:510)

    at ZoneTask.invoke (polyfills.js:495)

    at timer (polyfills.js:3078)

This is the package.json

"@angular/animations": "~8.2.14",

"@angular/common": "~8.2.14",

"@angular/compiler": "~8.2.14",

"@angular/core": "~8.2.14",

"@angular/forms": "~8.2.14",

"@angular/platform-browser": "~8.2.14",

"@angular/platform-browser-dynamic": "~8.2.14",

"@angular/router": "~8.2.14",

"@syncfusion/ej2-angular-buttons": "^18.2.44",

"@syncfusion/ej2-angular-dropdowns": "^18.2.47",

"@syncfusion/ej2-angular-grids": "^18.2.47",

"@syncfusion/ej2-angular-inputs": "^18.2.47",

"@syncfusion/ej2-angular-navigations": "^18.2.47",

"@syncfusion/ej2-angular-notifications": "^18.2.44",

"@syncfusion/ej2-angular-popups": "^18.3.35",

"@syncfusion/ej2-angular-querybuilder": "^18.2.47",

"@syncfusion/ej2-angular-splitbuttons": "^18.2.44",

I appreciate any support.

Kind regards

Gabriele Cossu

[Thiyagu Subramani]

Hi GABRIELE, 

Thanks for contacting Syncfusion forum. 

By default in EJ2 Grid the date column will be filter  properly when the values in date object but based on your reported information we suspect you are using required date column field type as ‘string’ and you faced “TypeError: value.getDate is not a function” script error in console window. 

To achieve this requirement we suggest you to define the required date column type as date and change the required date column value from string to date object using rowDataBound event Please refer to the below code. 

 rowDataBound : function(args){ 

    args.data.OrderDate = new Date(args.data.OrderDate);            

  } 

Note: If we use date string as like T00:00:00.000Z , it is a part of ISO-8601 date representation. So for this case if you set type as datetime in column level then it will be converted into the date object in source level.  

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdatabound 

If still facing the issue, please share the data that you have bounded to the data column(required column) and if possible share issue reproducing sample or video demonstration. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.