empty line in grid

[taramanMember]

Hi,
I have created a grid with virtual mode for paging
and created combo box to search for data in the grid.

the issue that, if the number of rows displayed is less than the page size, I got empty rows in the grid

https://dl.dropbox.com/u/22350214/Grid%20Empty%20Rows.png

[Peter StoevKeymaster]

Hi taraman,

The Grid by default creates UI rows that fill the view area. If you have data, it will be displayed in these rows. If you do not have, the rows will be empty unless the autoheight property is set to true.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[taramanMember]

Hi peter,

this the code for initialize the grid:

$("#gridSurgeries").jqxGrid({
        source: dataAdapterSurgeries,
        theme: theme,
        width: 1020,
        autoheight: true,
        //height:500,
        //altrows: true,
        pageable: true,
        pagesizeoptions: ["25", "50", "100"],
        sortable: true,
        sorttogglestates: 1,
        showsortcolumnbackground: false,
        virtualmode: true,
        rendergridrows: function (args) {
            return args.data;
        },
        groupable: true,
        groups: ["SurgeryDateGroupBy"],
        groupsexpandedbydefault: true,
        showgroupsheader: false,
        showgroupmenuitems: false,
        groupsrenderer: groupsrenderer,
        rendered: function () {
            $(".grouprowtext").parent().css("background-color", "#000000");
            $(".grouprowtext").parent().parent().find(":first-child").css("background-color", "#000000");
        },
        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 }
		]
       });

this code when changing the selected item in the comboBox which used for search:

$("#ddlApproverStatuses").bind("change", function (event) {
        if (event.args) {
            var item = event.args.item;
            if (item) {
                gridSurgeries_Load();
            }
        }
    });
function gridSurgeries_Load() {
    $("#gridSurgeries").jqxGrid({ source: dataAdapterSurgeries });
 }

please check this image:
it draw empty rows

[taramanMember]

the image:

output image

[taramanMember]

Hi Peter,

I found the reason of this issue,

if the page size of the grid is 25, and the returned data is for example 5 rows it will draw 20 empty rows

How can we fix that?

thanks
Taraman

[Peter StoevKeymaster]

Hi Taraman,

If the Grid’s ViewPort Height is for 25 Rows it will display 25 Rows. If you have data on these rows, the data will be displayed, otherwise, the rows will be empty. If you want the ViewPort’s Height to be equal to your Data Rows * Rows Height, then you need to set the “autoheight” property of jqxGrid to true.

Best Regards,
Peter Stoev

jQwidgets Team
http://www.jqwidgets.com

[Author]

Posts