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
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 Reply Children