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
Issue updating width property of JQuery Grid
posted
Hi,
 I am working with Infragistics 2011.2 JQuery Grid. I have a HTML page which hosts JQuery grid and it is bound to hard-coded JSON data. On load of the grid, the data shows up and the grid’s width is set to 600px. After 4 seconds, a JavaScript function (laterchange()) is automatically fired and it reloads different data (with same columns) and sets the grid’s width to 200px. I can see this different data, but issue is that the width does not change to 200px. I get the same results over IE8/9, Firefox and Google Chrome.
Am I missing some method/function to be called? Any help would be highly appreciated. Thanks.
Code for your reference:
<!doctype html>
<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>NetAdvantage for jQuery Samples</title>
    
    <link href="styles/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />
       <link href="styles/ig.ui.min.css" rel="stylesheet" type="text/css" />
       <link href="styles/style.css" rel="stylesheet" type="text/css" />
       
       <script src="scripts/modernizr.js" type="text/javascript"></script>
       <script src="scripts/jquery.min.js" type="text/javascript"></script> 
       <script src="scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
       <script src="scripts/ig.ui.min.js" type="text/javascript"></script>
 
       <script type="text/javascript">
 
           $(window).load(function () {
               $("#grid1").igGrid({
 
                   //CODE ADDED
                   autoGenerateColumns: false,
                   defaultColumnWidth: 200,
 
                   rowVirtualization: true,
                   columns: [

                           { headerText: "Product ID", key: "ID", dataType: "number", width: '130px' },

                           { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: '60px' },

                           { headerText: "Product Number2", key: "ProductNumber2", dataType: "string", width: '60px' },

                           { headerText: "Product Number3", key: "ProductNumber3", dataType: "string", width: '60px' },

                           { headerText: "Product Number4", key: "ProductNumber4", dataType: "string", width: '60px' },

                           { headerText: "Price", key: "Price", dataType: "number", width: '60px' },

                     ],

                   features: [

                           {

                               name: 'Sorting',

                               type: "local"

                           },

                           {

                                name: 'Resizing',

                               deferredResizing: true

 

                           },

                     ],

                   dataSource: CreateDataSource(),
                   height: '500px',
                   width: '600px',
                   avgRowHeight: '25px'
               });
               var width = $("#grid1").igGrid('option', 'width');
               alert("grid width:" + width);
               setTimeout("laterchange();", 4000);
 
           });
 
       function laterchange() {
 
           $("#grid1").igGrid('option', 'width', '200px');
              var width = $("#grid1").igGrid('option', 'width');
              alert("grid's new width:" + width);
 
              //-- Code to Rebind the Data source
              $("#grid1").igGrid("dataSourceObject", AnotherDataSource());
              $("#grid1").igGrid('dataBind');
              
       }
       
function getQuerystring(key, default_) {
  if (default_ == null) default_ = "";
  key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
  var qs = regex.exec(window.location.href);
  if (qs == null)
    return default_;
  else
    return qs[1];
}
       
function CreateDataSource()
{
       var jsonDs = [];
       for(var i = 0; i < getQuerystring("numrows","50000"); i++)
       {
              jsonDs[i] = {
                     "ID" : i,
                     "ProductNumber" : "Product_" + i,
                     "ProductNumber2": "Product_" + i,
                     "ProductNumber3": "Product_" + i,
                     "ProductNumber4": "Product_" + i,
                     "Price" : 1000 + i
              };
       }
       return jsonDs;
}
 
//-- Another Data Source with altered data
function AnotherDataSource() {
    var jsonDs = [];
    for (var i = 0; i < getQuerystring("numrows", "5"); i++) {
        jsonDs[i] = {
            "ID": i,
            "ProductNumber": "Updated_" + i,
            "ProductNumber2": "Updated_" + i,
            "ProductNumber3": "Updated_" + i,
            "ProductNumber4": "Updated_" + i,
            "Price": 1000 + i
        };
    }
    return jsonDs;
}
       
       </script>
</head>
<body>
<table id="grid1">
</table>
 
</body>
</html>
Parents
No Data
Reply
  • 24671
    posted

    hi

    We've identified that this is a bug in the widget, in the meantime until it's fixed you can use a <div> element instead of a <table> and it will work fine.

    Hope it helps. Thanks,

    Angel

Children
No Data