How to add a column in an already defined grid ?

I know that ‘define’ method is used to create a grid dynamically. But I wanted to know how to add a column after the grid is defined. Which method should I use ?


Or else I wanted to write a code for creating a grid where number of columns are not fixed.

In the define method, we define a column by writing
‘{id:“name”, label:“name”,width:150}’.

My query was how to write a generalized code to create a grid where number of columns are not fixed ?
Is there any method available ?
Please reply.

If you are using latest build …

you can use code like next to reset configuration of grid

$$('grid').define("fields", new_array_of_fields); $$('grid').refresh();

How to add the update to the existing library of DHTMLX Touch, the link of which you have provided ?

I don’t want to reset the configuration. I want to add a column to the existing grid without removing existing columns.

Basically I want to add variable number of columns depending upon the input given by the user. But in array of fields, fixed number of columns must be written.
So can you please elaborate ? Kindly reply. Thank you.


there is not addColumn method. You need to recreate the grid completely to change the number of columns.
So, the approach provided by Stanislav is the only way to change number of columns.

Ok… Actually What I want to do is

USER WILL FIRST PROVIDE NO. OF COLUMNS and then the column headers. Grid should be created automatically. How to do this ?
How to write the above code in .define method ? Because in fields we can provide fixed number of columns. How to draw a grid for VARIABLE NO. OF COLUMNS depending upon user input ?
Please reply in detail.
Thank you.


you may define only whole set of columns either in grid configuration or in define() method. There is not another possibility.

Yes that I understood. I think I am not able to write properly what I want.

{id:value, label:value,width:150}
]); // In this case I want 1 column.

{id:value, label:value,width:150},
{id:name, label:name,width:150}
]); // In this case 2 columns.

In the above case I had to write fixed number columns. I want write a loop kind of thing in that define() method which will redefine the grid for variable number of columns.
Like I want two columns or 3 columns or n columns, different everytime. That number of columns is given by the user.

The example:

var fields = []
fieldsNumber = 100
for(var i=0; i< fieldsNumber;i++){
fields.push({id:“id”+i, label:"value "+i,width:150});

Thanks a lot.