Not all rows displayed in grid

[taramanMember]

Hi,
I have created the following grid:

$("#grid").jqxGrid({
        source: dataAdapterSurgeries,
        theme: theme,
        width: 1020,
        autoheight: true,
        pageable: true,
        pagesizeoptions: ["25", "50", "100"],
        virtualmode: true,
        sortable: true,
        sorttogglestates: 1,
        showsortcolumnbackground: false,
        rendergridrows: function (args) {
            return args.data;
        },
        groupable: true,
        groups: ["SurgeryDateGroupBy"],
        groupsexpandedbydefault: true,
        showgroupsheader: false,
        showgroupmenuitems: false,
        groupsrenderer: groupsrenderer,
       
        columns: [
			{ text: "", dataField: "EncryptedSurgeryId", width: 50, cellsrenderer: renderViewImage, sortable: false, groupable: false },
			{ text: "", dataField: "SurgeryStatusImagePath", width: 50, cellsrenderer: renderSurgeryStatusImage, sortable: false, groupable: false },
			{ text: "Date", dataField: "SurgeryDateGroupBy", width: 120, cellsalign: "center", sortable: false, hidden: true },
			{ text: "Time", dataField: "SurgeryTime", width: 75, cellsformat: "t", cellsalign: "center", align: 'center', groupable: false },
			{ text: "Physician", dataField: "PhysicianName", width: 150, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Patient Id", dataField: "PatientId", width: 80, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Patient", dataField: "PatientShortName", width: 85, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Manufacturer", dataField: "ManufacturerName", width: 120, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Anatomy Group", dataField: "AnatomyGroupName", width: 110, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Procedure Type", dataField: "ProcedureTypeName", width: 150, cellsalign: "center", align: 'center', groupable: false },
			{ text: "", dataField: "GenderSideImagePath", width: 60, cellsrenderer: renderGenderSideImage, sortable: false, groupable: false },
			{ text: "", dataField: "IsKioskComplete", width: 60, cellsrenderer: renderScanmanCancelImage, sortable: false, groupable: false }
		]
    });

it has the following properties:
– autoheight = true
– server sorting
– server paging (default page size=25)
– Groupable (fixed, for only one column, and showgroupsheader is false)

the problem is that when getting 15 rows from server (less than the page size,25), it displays 9 rows only.

to fix this issue (workaround), I have two options:
– make the grid with fixed height (autoheight: false)
– or, remove grouping (groupable: false)

Is there any other solution rather that my workarounds?

[Peter StoevKeymaster]

Hi,

In the provided sample, the code that sets the initial page size is missing so I suppose that the Grid uses the default value – 10.

The code below shows how to set initial page size in jqxGrid:

    var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                pagenum: 3,
                pagesize: 20,
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };

The above code is from the: Initial Page and PageSize sample.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[taramanMember]

Hi Peter,

I assigned the pagesize in the source object, like the following:

var source = {
        datatype: "json",
        type: "GET",
        url: url,
        async: false,
        cache: false,
        datafields: [
				{ name: "SurgeryId" },
				{ name: "EncryptedSurgeryId" },
				{ name: "SurgeryDateGroupBy" },
				{ name: "SurgeryTime", type: "date" },
				{ name: "PhysicianName" },
				{ name: "PatientId" },
				{ name: "PatientShortName" },
				{ name: "ManufacturerName" },
				{ name: "AnatomyGroupName" },
				{ name: "ProcedureTypeName" },
				{ name: "IsKioskComplete", type: "bool" },
				{ name: "GenderSideImagePath" },
				{ name: "SurgeryStatusImagePath" },
		        { name: "IsApproved", type: "bool" }
			],
        pagesize: 25,
        sort: function () {
            $("#gridSurgeries").jqxGrid('updatebounddata', 'sort');
        },
        sortcolumn: "SurgeryTime",
        sortdirection: "asc",
        beforeprocessing: function (data) {
            data = data.d;
            var returnData = {
                totalrecords: data.count,
                records: data.records
            };
            return returnData;
        },
        formatdata: function (data) {
            var physicianCombo = $("#ddlPhysicians").jqxDropDownList('getSelectedItem');
            var statusCombo = $("#ddlApproverStatuses").jqxDropDownList('getSelectedItem');
            return {
                pagenum: data.pagenum,
                pagesize: data.pagesize,
                sortdatafield: data.sortdatafield,
                sortorder: data.sortorder,
                fromDate: getFromDate(),
                physicianId: physicianCombo ? physicianCombo.value : 0,
                approverStatusId: statusCombo ? statusCombo.value : 0
            };
        }
    };
    dataAdapterSurgeries = new $.jqx.dataAdapter(source, {
        contentType: "application/json; charset=utf-8",
        loadError: function (xhr, status, error) { alert(error); }
    });

but even when setting the pagesize in the grid initialization, I’ve got the same issue

[Peter StoevKeymaster]

Hi taraman,

Unfortunately, we are unable to reproduce the reported behavior with the provided information. We will continue our investigation and if we reproduce that, we will add a work item about it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AbbasParticipant]

Hi,
I have facing same issue I am using Grouping and groupsexpandedbydefault true when get data I am unable to see all row data without unexpended

[AbbasParticipant]

I am sharing source code with you
generatedata.js

function generatedata(rowscount, hasNullValues) {
// prepare the data
var data = new Array();
if (rowscount == undefined) rowscount = 100;
var firstNames =
[
“Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var lastNames =
[
“Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];

var productNames =
[
“Espresso con Panna”, “Peppermint Mocha Twist”
];

var priceValues =
[
“2.5”, “5.0”, “4.0”
];

for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);

row[“id”] = i;
row[“available”] = productindex % 2 == 0;
if (hasNullValues == true) {
if (productindex % 2 != 0) {
var random = Math.floor(Math.random() * rowscount);
row[“available”] = i % random == 0 ? null : false;
}
}
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“name”] = row[“firstname”] + ” ” + row[“lastname”];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;

var date = new Date();
date.setFullYear(date.getFullYear(), Math.floor(Math.random() * 12), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row[“date”] = date;

data[i] = row;
}

return data;
}
function generatecarsdata() {
var makes = [{ value:””, label: “Any”},

{ value: “25650”, label: “Wiesmann” }];

var fuelType = [“Any”, “Diesel”, “Electric”, “Ethanol (FFV, E85, etc.)”, “Gas”, “LPG”, “Natural Gas”, “Hybrid”, “Hydrogen”, “Petrol”];
var vehicleType = [“Saloon”, “Small Car”, “Estate Car”, “Van / Minibus”, “Off-road Vehicle/Pickup Truck”, “Cabriolet / Roadster”, “Sports Car/Coupe”];
var power =
[

{value:”295″, label: “295 kW (401 PS)”},
{value:”333″, label: “333 kW (453 PS)”}
];

var data = new Array();
for (var i = 0; i < makes.length; i++) {
var row = {};
row.make = makes[i].label;
row.fuelType = fuelType[Math.floor(Math.random() * fuelType.length)];
row.vehicleType = vehicleType[Math.floor(Math.random() * vehicleType.length)];
var powerIndex = Math.floor(Math.random() * power.length);
if (powerIndex == power.length – 1) powerIndex –;
row.powerFrom = power[powerIndex];
row.powerTo = power[powerIndex + 1];
data.push(row);
}
return data;
}

————————————————————————————————————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Grouping with Aggregates.</title>
<link rel=”stylesheet” href=”../Original/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/generatedata.js”></script>
<script type=”text/javascript” src=”../Original/jqwidgets/demos.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {

// prepare the data
var data = generatedata(50);

var source =
{
localdata: data,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘date’, type: ‘date’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
],
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};

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

// initialize jqxGrid
$(“#grid”).jqxGrid(
{

source: dataAdapter,
groupable: true,
groupsexpandedbydefault: true,

showstatusbar: true,
showaggregates: true,
statusbarheight: 25,
groups: [‘price’],
pageable: true,
virtualmode: true,
width: ‘100%’,
rendergridrows: function (obj) {

obj.data = Object.keys(obj.data).map(function (key) {
return obj.data[key];
});
if (obj.data.length > 0) {
$.each(obj.data, function (index, item) {

obj.data[index].Name = (item.firstname || ”);
});
}
return obj.data;

},
columns: [
{ text: ‘First Name’, aggregates: [“count”], datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, groupable: true, aggregates: [“count”], datafield: ‘lastname’, width: 100 },
{ text: ‘Name’, groupable: true, aggregates: [“count”], datafield: ‘Name’, width: 100 },
{ text: ‘Product’, groupable: true, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 200 },
{ text: ‘Quantity’, datafield: ‘quantity’, aggregates: [“sum”], width: 70, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, aggregates: [“sum”], cellsalign: ‘right’, width: 100, cellsformat: ‘c2’ },
{
text: ‘Total’, datafield: ‘total’, aggregates: [“sum”], cellsalign: ‘right’, cellsformat: ‘c2’,
cellsrenderer: function (row, column, value, defaultRender, column, rowData) {
if (value.toString().indexOf(“Sum”) >= 0) {
return defaultRender.replace(“Sum”, “Total”);
}
},

}
]
});
$(“#grid”).jqxGrid({ pageable: false });
//_gridObject.jqxGrid(‘showgroupsheader’, false);
$(“#grid”).jqxGrid({ rowsheight: 50 });
});

</script>
<style>
#grid{height:1000px !important;}
</style>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”grid”></div>

</div>
</body>
</html>

All data of grid is not display when groupsexpandedbydefault: true,

[AbbasParticipant]

When Data rows with Include Grouping row is 10 or greater than then display otherwise hide

[a2m developerParticipant]

Not sure if this was ever addressed, it wasn’t for my forum posting. See:
https://www.jqwidgets.com/community/topic/grid-grouping-missing-rows/

But I did find a workaround. I basically just updated the source totalrecords and increased the total by the number of groups.

this.source.totalrecords = data.count + (this.currentGroups.length * 2);

This shows all the rows of all the groups and it works in virtual mode.

Happy hacking!

[Author]

Posts