Grid not displaying last page

[dragontoungeParticipant]

Has anyone seen or reported a situation where the last page of a jqxGrid that is in virtual mode will draw gridlines where data should appear but leave the resulting grid cells empty?

We have a grid that works perfectly in virtual mode and retrieves and displays page after page of data properly until the LAST ‘page’ of data is reached. On the last page we see a grid drawn that would contain the correct number of rows that should appear in the grid but no data appears in the drawn cells. The data for every page (including the last) is returned from an AJAX query and used to create a new DataAdapter that is used to refresh the grid in the following manner:

$(‘#grid’).jqxGrid(‘showloadelement’);
$.get( url, params )
.done( function( data) {
dataobj = JSON.parse( data);
orgSource.localdata = dataobj.data.rs1; // array with rows of data
orgSource.totalrecords = dataobj.data.rs2[0].total_rows; // value containing total rows of all results
dataAdapter = new $.jqx.dataAdapter( orgSource);
$(“#grid”).jqxGrid({ source: dataAdapter });
$(‘#grid’).jqxGrid(‘hideloadelement’);
});

I would also note that, as an example, if the the page size is set to a larger number like 50 the last page might show 35 blank rows where data should be but if the page size is then adjusted to 10 using the paging controls at the bottom of the grid all the data for 30 of the rows that was not visible before does appear properly on their respective pages and, again, the last page, with only 5 rows in it, shows no data.

[DimitarParticipant]

Hello dragontounge,

There is no such known issue. Please make sure you are using the latest version of jQWidgets (3.8.1) and that you have followed the approach (where appropriate) of the demo Virtual Paging and the help topic Server Side Paging with jqxGrid using PHP and MySQL.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sangadParticipant]

I am facing the same issue JQWidget (3.9.1)

when i click on last page it display blank grid according to page size.
But data is not display.
data is present in datasource

[DimitarParticipant]

Hello sangad,

Could you, please, share a jsEditor/JSFiddle that reproduces the issue?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sangadParticipant]

try {
// prepare the data
$.ajax({
type: “POST”,
url: url,
data: parameter,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: false,
success: function (response) {
data = JSON.parse(response.d);
}
});

var source =
{
dataType: ‘json’,
type: “GET”,

datafields: [{ name: ‘fkint_UnitId’ }, { name: ‘pkint_SrNo’ }, { name: ‘rowIndex’ }, { name: ‘str_DeptName’ }, { name: ‘str_Sections’ }, { name: ‘str_Abbreviation’ }, { name: ‘AssetCount’}],
localdata: data,
pagesize: pagesize,
beforeprocessing: function (data) {
source.totalrecords = data[0].totalRecord;
}
};

var linkrenderer = function (row, column, value) {
try {
var rowdata = $(“#grdAllAsset”).jqxGrid(‘getrowdata’, row);
return ‘<input id=”imgbtn’ + rowdata.pkint_SrNo + ‘” type=”image” src=”../Common/Images/RSelect.gif” title=”View Asset[s] Details” onclick=”return BindAssetSubType(\” + rowdata.fkint_UnitId + ‘\’,\” + rowdata.pkint_SrNo + ‘\’);”/>’;
}
catch (e) {

}
}
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#grdAllAsset”).jqxGrid({
width: 770,
source: dataAdapter,
sortable: true,
groupable: true,
pageable: true,
autoheight: true,
columnsresize: true,
filterable: false,
pagermode: ‘simple’,
virtualmode: true,
columnsreorder: true,
rendergridrows: function () {
return data;
},
columns: [{ text: ‘#’, datafield: ‘rowIndex’, width: 50, sortable: false },
{ text: ‘Enterprise Unit’, datafield: ‘str_DeptName’, width: 230 },
{ text: ‘Enterprise Function’, datafield: ‘str_Sections’, width: 220 },
{ text: ‘Abbreviation’, datafield: ‘str_Abbreviation’, width: 110 },
{ text: ‘Asset[s] Count’, datafield: ‘AssetCount’, width: 110, sortable: false },
{ text: ‘fkint_UnitId’, datafield: ‘fkint_UnitId’, hidden: true },
{ text: ”, datafield: ‘pkint_SrNo’, width: 50, sortable: false, groupable: false, cellsrenderer: linkrenderer}]
});
}
catch (e) {

}

[DimitarParticipant]

Hi sangad,

Could you, please, share some sample data (the value of the data variable) so that we can test your code on our side?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Christian HuebertParticipant]

Though this thread is rather old, I faced the same problem today.

Debugging I found out the rendergridrows is called twice for the last page. The first time it is called with hte startIndex and endIndex being multiples of my pageSize, and everything is rendered fine. But immediatly after that a second call comes in, with the startIndex not being multiples. This causes empty lines in the grid.

Luckily the startIndex and endIndex are passed inside the parameter obj and used from there in the later code as it seems. SO I could overwrite them. Now everything works fine 🙂

rendergridrows: function (obj) {
            // hack
            if (obj.data && (obj.startindex % self.pagesize) != 0) {
                obj.startindex = Math.ceil(obj.startindex / self.pagesize) * self.pagesize;
                obj.endindex = Math.ceil(obj.endindex / self.pagesize) * self.pagesize;
            }
            return obj.data;
        }

[DimitarParticipant]

Hello Christian Huebert,

Thank you for the contribution.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts