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
Sagar
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
  • 6279
    Suggested Answer
    posted

    Hi,

    Actually I just spotted that you are using rowVirtualization in order to render a large volume of records.

    When any form of virtualization is used on the grid, you will not be able to change options such as width or height at runtime. The reason is that the grid's DOM is much more complex when there's virtualization so changing virtualization-dependent options such as the grid's width or height would cause a potentially slow and resource-intense recalculations and re-rendering.
    (So it's not really a matter of whether the grid is bound to a TABLE or a DIV) 

    My suggestion would be to destroy and re-initialize the grid with the new width when you are using virtualization.

    PS: Thank you very much for these sort of solid code samples in your posts - they're really helping us reproduce and process such questions :)

    Best Regards,
    Borislav 

Children
No Data