Issue updating width property of JQuery Grid

175

Sagar posted over 12 years ago

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>

<title>NetAdvantage for jQuery Samples</title>

$(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>

</body>

</html>

6279

Suggested Answer
[Infragistics] Borislav Traykov posted over 12 years ago

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
Cancel
Reply

Reject Answer

Cancel
24671

Alexander Todorov posted over 12 years ago

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
Cancel
Reply

Cancel