virtual mode rendering

[dpibtParticipant]

Hi,

I have a grid with virtual mode without pagination and when I fix the height of the grid but I render less registers than the grid is able to show without scrolling, then it paints empty rows even though I control the number of registers I want to render in rendergridrows method.

Here’s the code I copied from the fiddle you provide in the API:

var data = new Array();
 var firstNames = [
     "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
 var lastNames = [
     "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
 var productNames = [
     "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
 var priceValues = [
     "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
 // generate sample data.
 var generatedata = function (startindex, endindex) {
     var data = {};
     for (var i = startindex; i < 8; 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["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
         row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
         row["productname"] = productNames[productindex];
         row["price"] = price;
         row["quantity"] = quantity;
         row["total"] = price * quantity;
         data[i] = row;
     }
     return data;
 }
 var source = {
     datatype: "array",
     localdata: {},
     totalrecords: 8
 };
 // load virtual data.
 var rendergridrows = function (params) {
     var data = generatedata(params.startindex, params.endindex);
     return data;
 }
 var totalcolumnrenderer = function (row, column, cellvalue) {
     var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
     return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
 }
 var dataAdapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     height:600,
     theme: 'energyblue',
     autoheight: false,
     source: dataAdapter,
     virtualmode: true,
     pageable: false,
     rendergridrows: rendergridrows,
     columns: [{
         text: 'Id',
         datafield: 'id',
         width: 50
     }, {
         text: 'First Name',
         datafield: 'firstname',
         width: 100
     }, {
         text: 'Last Name',
         datafield: 'lastname',
         width: 100
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 180
     }]
 });

Is this an intentioned behaviour or it’s a bug? When virtual mode is off, no extra empty rows are rendered.

Thank you!

[Peter StoevKeymaster]

Hi dpibt,

If rendergridrows does not return the required amount of rows requested by the Grid, the other rows will be displayed as empty. That’s by design.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpibtParticipant]

The problem is that I do return the required amount of rows requested by the Grid (8 in the example, hardcoded in generateData() and in totalrecords property in source object used by dataAdapter), and it still shows empty rows.

[Peter StoevKeymaster]

Hi dpibt,

As far as I see, you do not return the requested rows. You always return 8 rows.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpibtParticipant]

Ok, I now understand what you mean. I thought it would behave as in non virutal mode when there are less rows than the grid can render (blank space without emty rows).

Thank you.

[Author]

Posts