Hi!
I am trying to get a DHTMLX Window to show a form containing a file select tree grid and two buttons (ok, cancel).
However, the formatting of the grid and buttons are off.
- The grid is wider than specified, only the left border is shown - a horizontal scroll bar is present.
- When maximizing the window the buttons moves to the right of the grid - not below as intended.
Q1: How can I size the grid so that all borders are visible - and no horizontal scroll?
Q2: How can I force the buttons to always show below the grid?
Please see example code below.
[index.html]
TreeGrid initialization from JSON (dhtmlx format) div#winVP { position: relative; height: 350px; border: 1px solid #dfdfdf; margin: 10px; }<script>
var myTreeGrid, dhxWins, myWindow, myForm;
function doOnLoad() {
dhxWins = new dhtmlXWindows();
dhxWins.attachViewportTo("winVP");
}
var idPrefix = 1;
//create window
function createWindow() {
var p = 0;
dhxWins.forEachWindow(function(){p++;});
if (p>0) {
//insert code to disable button
return;
}
var id = "userWin"+(idPrefix++); //dynamic id, remove?
myWindow = dhxWins.createWindow(id, 20, 30, 610, 300); //window size
dhxWins.window(id).setText("Select file(s)");
dhxWins.window(id).center(); //center window on screen
var formStructure = [
{type: "container", name: "myGrid", inputWidth: 600, inputHeight: 180},
{type:"newcolumn"},
{type: "button", name: "btn", value: "Cancel"},
{type:"newcolumn"},
{type: "button", name: "btn", value: "Ok"}
];
myForm = myWindow.attachForm(formStructure);
myTreeGrid = new dhtmlXGridObject(myForm.getContainer("myGrid"));
myTreeGrid.setImagePath("dhtmlxSuite_v508_pro/codebase/imgs/");
myTreeGrid.setHeader("Filnamn,");
myTreeGrid.setInitWidths("450,250");
myTreeGrid.setColAlign("left,left");
myTreeGrid.setColTypes("tree,txt");
myTreeGrid.setColSorting("str,str");
myTreeGrid.enableAutoWidth(true);
myTreeGrid.init();
myTreeGrid.load("forumFiles.json", "json");
}
function doOnUnload() {
if (dhxWins != null && dhxWins.unload != null) {
dhxWins.unload();
dhxWins = w1 = myTreeGrid = myForm = myWindow = null;
}
}
</script>
[forumFiles.json]
{
rows:[
{ id:‘1001’,
data:[
{“value”:“Folder”,“image”:“folder.gif”},
],
rows:[
{ id:‘sub_1001’,
data:[
“file1.pdf”,
“<input type="checkbox" name="file1.pdf" >”
]
},
{ id:‘sub_1002’,
data:[
“file2.pdf”,
“<input type="checkbox" name="file2.pdf" >”
] }
]
},
{ id:‘1002’,
xmlkids:‘1’,
data:[
“file3.jpg”,
“<input type="checkbox" name="file3.pdf" >”
] }
]
}