Hi,
Though I set the avgRowHeight property in the grid with virtualization enabled, the complete height is occupied by whatever is the count of rows. This looks bad when there are 1/2/3 rows in grid. How do i fix this, below is a sample for your reference?
Thanks.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" /><title>Tabout Demo</title> <link href="Content/ig.ui.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20131/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="Scripts/modernizr-1.7.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script> <script src="Scripts/infragistics.util.js" type="text/javascript"></script> <script src="Scripts/infragistics.datasource.js" type="text/javascript"></script> <script src="Scripts/infragistics.ui.scroll.js" type="text/javascript"></script> <script src="Scripts/infragistics.ui.grid.framework.js" type="text/javascript"></script> <script src="Scripts/infragistics.ui.grid.selection.js" type="text/javascript"></script> <script src="Scripts/infragistics.ui.grid.updating.js" type="text/javascript"></script> <script src="Scripts/infragistics.ui.grid.featurechooser.js" type="text/javascript"></script> <script src="Scripts/infragistics.ui.shared.js" type="text/javascript"></script> <script type="text/javascript"> $().ready(function () { var products = [{ 'ProductID': 1, 'Name':'12123', 'ProductNumber': '', 'HiddenColumn': '1234', 'ProductDesc':'12as' }]; $("#grid").igGrid({ columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", editorType: "number", readOnly:true }, { headerText: "Product Name", key: "Name", dataType: "string", editorType: "text" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string", editorType: "text" }, { headerText: "Product Description", key: "ProductDesc", dataType: "string", editorType: "text" } ], width: "500px", avgRowHeight: '51px', height: '500px', dataSource: products, recordConstructor: function () { this.ProductID = 1; this.ProductName = ''; this.ProductCode = ''; this.ProductDesc = '' }, autoGenerateColumns: false, virtualize: true, autoCommit: true, aggregateTransactions: true, jQueryTemplating: false, fixedHeaders: true, rowVirtualization: true, primaryKey: 'ProductID', features: [ { name: "Updating", editMode: 'row', showDoneCancelButtons: false } ] }); }); </script></head><body><div class="page"> <div id="main"><table id="grid"></table></div> </div></body></html>
Hello Vivek,
I have investigated your issue and, I have asked our engineering staff to examine this further. To ensure that it will receive attention, I have logged this behavior in our internal tracking system with a Development ID of 142650. The next step will be for a developer to review my investigation and confirm my findings or to offer a fix, or other resolution.
I will leave this case open and update you with any new information after the review.
Please let me know if you need more information.
I see that you have submitted a private support case(CAS-117744-Y9D1R6 ) for this issue. I will assist you further in that case
Please let me know if you have any questions.