pagination for grid not working

[wpdParticipant]

Hello,

grid not showing data when i am adding attribute pagesizeoptions

<jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
[height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns” [showheader]=”true”
[pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [pagesizeoptions]=”[’25’, ’50’, ’75’]” [pagesize]=”50″>
</jqxGrid>

it is working good when i remove this(below code is working good)
<jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
[height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns” [showheader]=”true”
[pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [pagesize]=”20″>
</jqxGrid>

Any thoughts?

[HristoParticipant]

Hello wpd,

I tested this example below and it seems to work fine:
https://stackblitz.com/edit/github-fqjdgx
Could you clarify it?
Please, try to provide us with a simplified example.
For this purpose, you could try to use the example above to reproduce it.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[wpdParticipant]

I am using Angular 8 and jqwidgets-ng 9

<jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
[height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns”
[showheader]=”true” [pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [enablebrowserselection]=”true” [pagesizeoptions]=”[’25’, ’50’, ’75’]” [pagesize]=”50″>
</jqxGrid>

const source: any = {
localdata: this.allJobs,
datatype: ‘json’,
datafields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘jobName’, type: ‘string’ },
{ name: ‘jobType’, type: ‘string’ },
{ name: ‘jobStat’, type: ‘string’ },
{ name: ‘site’, type: ‘string’ },
{ name: ‘cell’, type: ‘string’ },
{ name: ‘jobSubmitter’, type: ‘string’ },
{ name: ‘loadType’, type: ‘string’ },
{ name: ‘loadDate’, type: ‘date’ },
{ name: ‘lastLoadDate’, type: ‘date’ },
{ name: ‘payload’, type: ‘string’ },
{ name: ‘runLog’, type: ‘string’ },
{ name: ‘jobSize’, type: ‘number’ },
{ name: ‘jobDepK’, type: ‘number’ },
{ name: ‘runMsgLogX’, type: ‘string’ },
{ name: ‘statusColor’, type: ‘string’ }
],
};

// console.log(source);
this.jobStatusDataAdapter = new jqx.dataAdapter(source);

// console.log(this.jobStatusDataAdapter);

const statusrenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
const theStatus = rowdata.jobStat;
const statusColor = rowdata.statusColor;
if (theStatus === ‘Failed’) {
return ‘<div style=”display: inline-block; margin-top: 7px; color: ‘ + statusColor + ‘;”>’ + theStatus + ‘</div>’ +
‘<div style=”display: inline-block; margin-left: 5px; margin-top: 3px; cursor: pointer;” >’
+ ‘<i class=”material-icons” style=”color:’ + statusColor + ‘;”>error_outline</i></div>’;
} else {
return ‘<div style=”display: inline-block; margin-top: 7px; color: ‘ + statusColor + ‘;”>’ + theStatus + ‘</div>’;
}
};

const linkDownload = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
const theStatus = rowdata.jobStat;
if (theStatus === ‘Failed’) {
return ‘<div style=”margin-left: 25px; margin-top: 3px; cursor: pointer;” class=”under-circle-green”>’
+ ‘<i class=”material-icons” style=”color:green;”>arrow_downward</i></div>’;
}
};

this.jobStatusColumns =
[
{
text: ‘Job Id’, datafield: ‘id’, width: ‘5%’,

},
{
text: ‘Job Name’, datafield: ‘jobName’, width: ‘12%’,

},
{
text: ‘Job Status’, datafield: ‘jobStat’, cellsrenderer: statusrenderer, width: ‘7%’,

},
{
text: ‘Site’, datafield: ‘site’, width: ‘7%’,

},
{
text: ‘Cell’, datafield: ‘cell’, width: ‘7%’,

},
{
text: ‘JobSubmitter’, datafield: ‘jobSubmitter’, width: ‘8%’,

},
{
text: ‘Log Files’, datafield: ‘runLog’, width: ‘5%’, cellsrenderer: linkDownload, filterable: false, hidden: true

},
{
text: ‘LoadType’, datafield: ‘loadType’, width: ‘13%’,

},
{
text: ‘Scheduled Date(GMT)’, datafield: ‘loadDate’, width: ‘13%’,

},
{
text: ‘Completed Date(GMT)’, datafield: ‘lastLoadDate’, width: ‘10%’,

},
{
text: ‘PayLoad File’, datafield: ‘payload’, width: ‘13%’,

}
];
setTimeout(() => {
// this.jobStatusGrid.applyfilters();
if (sessionStorage.getItem(this.constant.USER_ROLE) === ‘Admin’ || sessionStorage.getItem(this.constant.USER_ROLE) === ‘Manager’) {
this.jobStatusGrid.showcolumn(‘runLog’);
this.jobStatusGrid.render();
} else {
this.jobStatusGrid.setcolumnproperty(‘jobSubmitter’, ‘width’, ‘13%’);
}

}, 10);

Please see the code

[HristoParticipant]

Hello wpd,

I try to reproduce your case but there is missing information.
The allJobs variable and also, the structure of your code.
It seems that you use the mentioned code snippet in a function which could cause issues.
I try to change it and the example seems to work fine with normalized scenario (if we avoid the missing data).
Please, clarify it or it will be better to demonstrate your case in the stackblitz as on the end just use the “Fork” option and share the link.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts