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>