filter error in jqxgrid

[KavyaParticipant]

Hi,

I’am loading grid by assigning url to the source in a function during ngOnInit.

Example:

this.employeeSource.url = ‘/api/a1/as/employee’;
this.employeegrid.createComponent();
this.employeegrid.source(this.employeeSource);
this.totalItems = this.employeeSource.totalrecords;

while filtering it throws the following error:
TypeError: G.grid.source.formatDate is not a function at push../node_modules/jqwidgets-ng/__ivy_ngcc__/jqwidgets/jqxgrid.js.b.jqx.dataview.databind (jqxgrid.js:8)

datafields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘displayName’, type: ‘string’ },
{ name: ‘createdDateTime’, type: ‘date’}
],

createdDateTime filter has issue

[adminKeymaster]

Hi Kavya,

this.employeeSource should be a dataAdapter instance. Also in createComponent, you can pass the init properties.
Could you share a stackblitz sample?

Regards,
Peter

[KavyaParticipant]

employeeSource: any =
{
datatype: ‘json’,
cache: false,
pagesize: 10,
totalrecords: 0,
pagenum: 0,
datafields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘displayName’, type: ‘string’ },
{ name: ‘createdDateTime’, type: ‘date’}
],
root: “employee”,
pager: (pagenum: any, pagesize: any, oldpagenum: any): void => {
this.currentPage = pagenum;
this.pageSize = pagesize;
},
filter: () => {
if(this.employeegrid){
try{
this.employeegrid.updatebounddata(‘filter’);
} catch(err) {
console.log(err);
}
}
},
sort: () => {
if(this.employeegrid){
this.employeegrid.updatebounddata(‘sort’);
}
},
beforeprocessing: (data) => {
if (data != null) {
if (this.employeeSource && data[“data”]) {
this.employeeSource.totalrecords = data[“data”].totalRows;
this.totalItems = data[“data”].totalRows;
}
else if (data[“status”]) {
if (data[“status”] == “error”) {
this.totalItems = 0;
this.employeeSource.totalrecords = 0;
}
}
}
},
formatdata: (data) => {
return data;
}
};

employeeDataAdapter: any = new jqx.dataAdapter(this.employeeSource,{
loadError: (jqXHR, status, error) => {
},
downloadComplete: (edata, textStatus, jqXHR) => {
console.log(“employeeDataAdapter downloadComplete”);
if (edata != null) {
//this.jqxLoader.close();
if(edata[“status”]){
if(edata[“status”] == “error”){

} else {
if(this.employeeSource){
this.employeeSource[‘totalrecords’] = edata.totalRows;
}
}
}
}
}
});

[KavyaParticipant]

Hi,
I tried by passing the init properties to createComponent, still it didn’t work.

[adminKeymaster]

Hi Kavya,

From the provided code, I cannot understand why the filter and sort properties of the source object are set as the grid is not in virtual mode. These should be set only when the grid works in virtual mode.

Regards,
Peter

[KavyaParticipant]

Hi,

employee-list.component.html

<jqxGrid #employeesgrid
[width]=”‘100%'” [height]=”‘98%'” [source]=”employeesDataAdapter” [columns]=”employeesGridColumns”
[theme]=”appTheme” [columnsresize]=”true” [altrows]=”true” [pageable]=”true” [pagesize]=”10″
[auto-create]=”true” [enabletooltips]=”true” [columnsautoresize]=”true” [virtualmode] = “true”
[rendergridrows]=”rendergridrows” [sortable]=”true” [filterable]=”true” (onPagechanged)=”Pagechanged($event)”
(onBindingcomplete)=”employeesgridBindingcomplete($event)” >
</jqxGrid>

[Author]

Posts