Issue updating width property of JQuery Grid

Answered (Not Verified) This post has 0 verified answers | 2 Replies | 3 Followers Thread's RSS feed.

Points 175
Replied On: Tue, Apr 24 2012 8:16 AM Reply



 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>


       <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 () {


                   //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());





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_;


    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;






<table id="grid1">





  • Post Points: 35

All Replies

Alexander Todorov
Points 24,656
Infragistics Employee
Replied On: Wed, Apr 25 2012 3:40 AM Reply


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,


  • Post Points: 5
Answered (Not Verified) Replied On: Wed, Apr 25 2012 6:48 AM Reply


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,

  • Post Points: 5
Page 1 of 1 (3 items) | RSS