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
Wajid Mohammed
165
Vertical scroll doesn't hide when no rows in the grid
posted

Hi,

Am facing an issue with the grid's scroll bar which doesn't hide upon removing all rows from the grid. Infact, the scroll bar doesn't resize with the number of rows in the grid. Am seeing this in the recent 13.1.20131.2103 build. Is there any workaround to fix the issue?

Below is the sample grid with all basic settings needed.

<!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.templating.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.combo.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.editors.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.filtering.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.grid.rowselectors.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.grid.selection.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.grid.sorting.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.grid.tooltips.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.grid.updating.js" type="text/javascript"></script>
<script src="Scripts/infragistics.ui.tree.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' },
{ 'ProductID': 2, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 3, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 4, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 5, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 6, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 7, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 8, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 9, 'Name':'12123', 'ProductNumber': '3232', 'HiddenColumn': '1234', 'ProductDesc':'12as' },
{ 'ProductID': 10, 'Name':'12123', 'ProductNumber': '3232', '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>