I'm having a problem with a combination of features. I using 11.2 and have a virtualized grid with hidden columns and sorting. I'm also having to rebind the datasource at times, which is where the problem starts. I've found that after binding a datasource a second time I can't sort any columns that are after a hidden column. The grid throws an error, but only for columns after the hidden column.
I have code below made from an alteration to the virtualization demo. Just sort on the last column to see the problem.
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>NetAdvantage for jQuery Samples</title>
<link href="../../themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />
<link href="../../themes/base/ig.ui.min.css" rel="stylesheet" type="text/css" />
<link href="../content/style.css" rel="stylesheet" type="text/css" />
<script src="../scripts/modernizr-1.7.min.js"></script>
<script src="../scripts/jquery.min.js" type="text/javascript"></script>
<script src="../scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="../../js/combined/min/ig.ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$("#grid1").igGrid({
features: [
{
name: "Sorting",
firstSortDirection: "ascending",
type: "local"
},
],
rowVirtualization: true,
columns: [
{ headerText: "Product ID", key: "ID", dataType: "number", width:"100px", hidden:false},
{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width:"100px", hidden:false},
{ headerText: "Price", key: "Price", dataType: "number", width:"100px", hidden:false},
{ headerText: "Price2", key: "Price2", dataType: "number", width:"100px", hidden:true},
{ headerText: "Price3", key: "Price3", dataType: "number", width:"100px", hidden:false},
{ headerText: "Price4", key: "Price4", dataType: "number", width:"100px", hidden:false}
dataSource: CreateDataSource(),
height:'400px',
width: '600px'
});
$("#grid1").igGrid("dataSourceObject", CreateDataSource());
$("#grid1").igGrid("dataBind");
function CreateDataSource()
var jsonDs = [];
for(var i = 0; i < 10000; i++)
jsonDs[i] = {
"ID" : i,
"ProductNumber" : "Product_" + i,
"Price" : 1000 + i,
"Price2" : 2000 + i,
"Price3" : 3000 + i,
"Price4" : 4000 + i
};
}
return jsonDs;
</script>
</head>
<body>
<div id="container">
<header>
<h1 class="logo"><a href="../index.html"><img src="../Content/images/infragistics.png" /></a></h1>
</header>
<div id="main" role="main">
<section class="product">
<img src="../Content/images/jquery-netadvantage.png" />
<p>Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You'll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.</p>
</section>
<div class="content clearfix">
<!-- side nav begins here -->
<iframe src="../nav.html" scrolling="auto" class="side-nav"></iframe>
<!-- side nav ends here -->
<section class="main-box">
<hgroup>
<h1>Infragistics NetAdvantage JQuery</h1>
<h2>Row Virtualization</h2>
<p>This sample demonstrates the unique HTML row virtualization capabilities of the <span class="code-inline">igGrid</span> control.
Virtualization is valuable when displaying large sets of records to end users.
For example, a virtualized grid can support a data source of thousands of records
and still provide a responsive experience to the end-user during a rapid scroll
of the grid. This responsiveness is present when virtual scrolling and paging are not enabled.</p>
</hgroup>
<div class="sampleContainer">
<table id="grid1">
</table>
</div>
<footer>
</footer>
</body>
</html>
Hi luisrh,
Thank you for reporting this issue.
I have tested this scenario and after successfully replicating the matter I have asked our Engineering staff to examine this further.In order to ensure that the matter will receive attention I have logged this behaviors in our internal tracking system with a Development IDs 112103. The next step would be for a developer to research the issues and confirm my findings or offer some resolution.
Your support ticket number regarding this matter is CAS-91888-JSZTJJ . Please feel free to send us any updates in the meantime. You can view the status of the development issue connected to this case by going to the “My IG” tab on our website, hovering to the "My Support Activity" dropdown and selecting the "Development Issues" tab.
Feel free to contact me if you have any questions.