Filtering data based on a Data type column
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
SIGN IN To post a reply.
1 Reply
SIGN IN To post a reply.
