Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Sudhahar Jayapalan
175
Row height in a virtualized grid
posted

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>

Parents
No Data
Reply
  • 7499
    posted

    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.

Children