Grid showing only first page

[Mehdi Ben CheikhParticipant]

I want to load the data on demand but I only get the data of the first page. (when I go to the second page or else I still get the data of the first page)
When I disable the paging and work with scrolling, everything works fine.

Here is the code:
Source:

source =
    {
        datatype: 'json',
        datafields: [
            { name: 'Id', map: 'Id' },
            { name: 'Bezeichnung', map: 'Bezeichnung' },
            { name: 'IdRefStrasse', map: 'IdRefStrasse' }
        ],
        url: 'src/assets/Haltung_with_descriptions.json',
        id: 'Id',
        root: 'Root>AbwHaltung'
};

Columns:

columns =
    [
        { text: 'Id', datafield: 'Id', width: 'auto' },
        { text: 'Bezeichnung', datafield: 'Bezeichnung', width: 'auto' },
        { text: 'IdRefStrasse', datafield: 'IdRefStrasse', width: 'auto' },
        { text: '#', datafield: 'visibleindex', width: 'auto' }
    ];

The data Adapter:
dataAdapterGrid: any = new $.jqx.dataAdapter(this.sourceHaltungJson);

Function for loading the data:

loadLazyData(obj) {
        let d = {};
        for (let i = obj.startindex; i < obj.endindex; i++) {

            let row = {};

            row["Id"] = obj.data[i].Id;
            row["Bezeichnung"] = obj.data[i].Bezeichnung;
            row["IdRefStrasse"] = obj.data[i].IdRefStrasse;
            d[i] = row;

        }
        return d;
    };

Settings:

setting: jqwidgets.GridOptions = {
        width: '99%',
        height: '98%',
        source: this.dataAdapterGrid,
        columns: this.columns,
        editable: true,
        virtualmode: true,
        pageable: true,
        pagermode: 'simple',
        rendergridrows: this.loadLazyData,
        showfilterrow: true,
        groupable: false,
        sorttogglestates: '2',
        autoshowloadelement: true,
        showfiltermenuitems: true,
        showstatusbar: true,
        statusbarheight: 10,
        columnsheight: 20,
        autorowheight: false,
        autoheight: false,
        pagesize: 5,
        showaggregates: true,
        filterable: true,
        sortable: true,

        columnsresize: true,
        columnsmenu: true,
        showfiltercolumnbackground: true,
        autoshowfiltericon: true,
        enabletooltips: true,
        autoshowcolumnsmenubutton: true,
        columnsreorder: true,
        pagesizeoptions: [5, 10, 20, 30],
        scrollmode: 'deferred',
        editmode: 'dblclick',
        selectionmode: 'singlerow',
        enablebrowserselection: true};

CreateWidget:

ngAfterViewInit(): void {
        this.mainGrid.createComponent(this.setting);
    };

@ViewChild('gridReference') mainGrid: jqxGridComponent;

Please help!
Thank you
Mehdi Ben Cheikh

[Mehdi Ben CheikhParticipant]

Help please

[HristoParticipant]

Hello Mehdi Ben Cheikh,

In the ‘loadLazyData’ function is happened this, there has something as a buffer because using virtualmode and it sends same data.
I would like to suggest you try this approach there:

var rendergridrows = function (params) {
	var array = [];
	var start = params.startindex + params.startindex;
	var end = params.endindex + params.startindex;
	for (var i = start; i < end; i++) {
		array.push(params.data[i]);
	}

	return array;
};

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Mehdi Ben CheikhParticipant]

Hey Hristo,

Thanks, this example is working well. Still need now to sort and filter the data.

Thanks again,

Regards

[HristoParticipant]

Hello Mehdi Ben Cheikh,

I would suggest you look at those demos if you did not do this:
http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?light
http://jspexamples.jqwidgets.com/examples/grid-sorting-paging-filtering.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts