jQuery UI Widgets Forums Angular pagination for grid not working

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • pagination for grid not working #111465

    wpd
    Participant

    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?

    pagination for grid not working #111497

    Hristo
    Participant

    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

    pagination for grid not working #111603

    wpd
    Participant

    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

    pagination for grid not working #111649

    Hristo
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.