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 :-


But the columns stay the same width.

If I try to resize the columns :-


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

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


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: