How to avoid or remove empty rows getting added in jqxGrid

[SubramanainParticipant]

Hi Team,

I using 1.11.1 version. Issues is empty rows are getting added if we give height: 150 in jqxgrid config. I do not want to use autoheight property as requirement is fixed height.

It could be resolved If we upgrade to higher version, If yes means which higher version I supposed to use?

Please help me to resolve this issue.

Thanks,
Subramanian

[DimitarParticipant]

Hi Subramanian,

I guess you are using version 1.11.1 of jQuery. As for our product, jQWidgets, we recommend you to download the latest version – 3.8.0 – for the best widget experience.

Best Regards,
Dimitar

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

[SubramanainParticipant]

Hi Dimitar,

If I use latest version – 3.8.0, then this adding empty rows will be resolved?

Thanks,
Subramanian

[DimitarParticipant]

Hi Subramanian,

Yes, these empty rows should be replaced by blank space.

Best Regards,
Dimitar

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

[SubramanainParticipant]

Hi Dimitar,

I have downloaded jqwidgets-ver3.8.0 version. It also contains jquery-1.11.1.min of jQuery. Anyhow I have replaced with latest jqwidgets js files & jquery js files. Still empty rows are getting added.

Below the code how configured and loading data to jqxGrid. Method loadGridDataSuccess() loading data onload page.

Result of onload page, I could see “No data to display” and then loaded 2 rows of data and some 6 rows of EMPTY ROWS. here result row contains 2 row data from DB. hence how 6 rows of empty row getting added.

var empty_source =
{
localdata: empty_data,
datatype: “local”,
datafields:
[
{ name: ‘hid’, type: ‘string’ },
{ name: ‘job’, type: ‘string’ }
]
};
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<span style=”margin: 4px; font-size: 5px; font-weight: bold;”>’ + value + ‘</span>’;
}
var dataAdapter = new $.jqx.dataAdapter(empty_source);
$(“#jqxJobGrid”).jqxGrid(
{
width: ‘100%’,
height: 150,
rowsheight: 17,
columnsheight: 17,
source: dataAdapter,
editable: true,
columns: [
{ text: ‘HID’, datafield: ‘hid’, width: 0, cellsrenderer: cellsrenderer ,hidden: true,editable: false},
{ text: ‘Job’, datafield: ‘job’, width: 60, cellsrenderer: cellsrenderer,editable: false}
]
});

function loadGridDataSuccess(tx,result){
var jqxJobGrid_data = {};
for (var i=0; i<result.rows.length; i++) {
var row = result.rows.item(i);
var arrayRow = {};
arrayRow[‘hid’] = row[‘Job_Substeps_Id’];
arrayRow[‘job’] = row[‘Job_Id’];
jqxJobGrid_data[i] = arrayRow;
}
jqxJobGrid_data.localdata = jqxJobGrid_data;
var dataAdapter = new $.jqx.dataAdapter(jqxJobGrid_data);
$(“#jqxJobGrid”).jqxGrid({ source: dataAdapter });
}

Please Help and let me know if any concerns or queries.

Thanks,
Subramanian

[DimitarParticipant]

Hi Subramanian,

The issue is not with the jQWidgets version, but with your function loadGridDataSuccess. Here is how we suggest you change it:

function loadGridDataSuccess(tx, result) {
    var jqxJobGrid_data = [];
    for (var i = 0; i < result.rows.length; i++) {
        var row = result.rows.item(i);
        var arrayRow = {};
        arrayRow['hid'] = row['Job_Substeps_Id'];
        arrayRow['job'] = row['Job_Id'];
        jqxJobGrid_data[i] = arrayRow;
    }
    empty_source.localdata = jqxJobGrid_data;
    $("#jqxJobGrid").jqxGrid({
        source: dataAdapter
    });
}

Best Regards,
Dimitar

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

[Author]

Posts