i’m trying to implement a dhtmlxForm in a dhtmlxWindows control that is invoked when a user clicks on a register in a dhtmlxGrid.
At this moment it’s running correctly, except that i need to show a hugh amount of information in the form (about 56 fields), and i am not able to show it correctly in more than one column.
Is there a way to implement a multi-column or another view for the fields attached to the form different to a vertical list of inputs-textfields?

This is the code I use:

var data = [
{type:“settings”, position: “label-left”, labelWidth: 80, inputWidth: 120},
{type:“input”,id:“ALIAS”,name:“ALIAS”,label:“ALIAS”,value: mygrid.cells(Id,0).getValue()},{type:“input”,id:“DRAWING_NO”,name:“DRAWING_NO”,label:“DRAWING_NO”,value: mygrid.cells(Id,1).getValue()},
{type:“input”,id:“KEYWORD”,name:“KEYWORD”,label:“KEYWORD”,value: mygrid.cells(Id,2).getValue()},

var id = “Window”; //+winCount;
var dhxWins= new dhtmlXWindows();
win = dhxWins.createWindow(id, 20, 20, 640, 700);
win.setText("Work Order: “+mygrid.cells(Id,32).getValue()+” " +id);
dhxForm = win.attachForm(data);

I tried the “inputWidth auto” but it doesn’t work.


In 2.6 version of dhtmlxForm multi-column mode is not available. But it is in 3.0 version.

You may download a beta version here:

In Form 3.0 there is an item type “newcolumn” which can help you easily create a needed mount of columns.

{type: "select", label: "SELECT", options:[ {value: "1", text: "*", selected: true}, {value: "2", text: "userId"}, {value: "3", text: "userName"} ]}, {type: "newcolumn"}, {type: "select", label: "FROM", options: [ {value: "1", text: "users", selected: true} ]},


demo available here … olumn.html

Dear all,

thanks for the replies.

I tried to did the new column type, but it doesn’t run. First, i use the new libraries.

Then, i tried the following:

var data = [
{type:“settings”, position: “label-left”, labelWidth: 80, inputWidth: “auto”},
{type:“input”,id:“ALIAS”,name:“ALIAS”,label:“ALIAS”,value: mygrid.cells(Id,0).getValue(),readonly:“readonly”},
{type:“input”,id:“DRAWING_NO”,name:“DRAWING_NO”,label:“DRAWING_NO”,value: mygrid.cells(Id,1).getValue(),readonly:“readonly”},

But it doesn’t run (it only creates a white space between DRAWING_NO and the update button, in the bottom of the form.

Then, i looked for the sample provided by Andrei, and i saw that it uses a list element, so i tried to implement it as following:
var data = [
{type:“input”,id:“SUPP-INSUL”,name:88,label:“SUPP-INSUL”,value: mygrid.cells(Id,88).getValue()},
{type: “label”,
list: [{
{type:“input”,id:“SUPP-MECH”,name:89,label:“SUPP-MECH”,value: mygrid.cells(Id,89).getValue()},
{type:“input”,id:“SUPP-MET”,name:90,label:“SUPP-MET”,value: mygrid.cells(Id,90).getValue()},
{type:“input”,id:“SUPP-SCAFF”,name:91,label:“SUPP-SCAFF”,value: mygrid.cells(Id,91).getValue()},
{type:“input”,id:“WP-CONF SPACE”,name:92,label:“WP-CONF SPACE”,value: mygrid.cells(Id,92).getValue()},
{type:“input”,id:“WP-HOT”,name:93,label:“WP-HOT”,value: mygrid.cells(Id,93).getValue()},

But it only throws a javascript exception: expected identifier string or number

Please, support me in this issue. Regards,

Unfortunately the issue cannot be reconstructed.

If issue still occurs for you please provide the completed demo.