Resizing Grid Columns

Given a grid like this :-

view:"grid", id:"grid", width:320, datatype:"json", select:true, scroll:true, fields:[
	{ view:"text", id:"col_1", width:90,  label:"Col 1" },
	{ view:"text", id:"col_2", width:130, label:"Col 2" },
	{ view:"text", id:"col_3", width:100, label:"Col 3" }
]

I can resize the grid with :-

$$('grid').define('width',480);
$$('grid').resize();

But the columns stay the same width.

If I try to resize the columns :-

$$('col_1').define('width',135);
$$('col_1').resize();
$$('col_2').define('width',195);
$$('col_2').resize();
$$('col_3').define('width',150);
$$('col_3').resize();

I get an error: “Cannot call method ‘define’ of undefined”.

How do I change the width of a grid’s columns?

Hello,

grid columns/fields are not view-based. Therefore, you can not access them using $$() method.

“fields” property is part of grid config and it is only possible to redefine all fields and their properties. Here is an example:

$$("grid").define("fields",[ { id:"col_1", width:135, label:"Col 1" }, { id:"col_2", width:195, label:"Col 2" }, { id:"col_3", width:150, label:"Col 3" } ]) $$("grid").refresh();

That works! Thanks :slight_smile: