Placing two treegrids alongside each other

[alastairwalker]

I am trying to place two treegrids alongside each other.

I am using the following code:

Left table:

<table id="tg" title="Folder Browser 1" class="easyui-treegrid" style="width:50%;height:250px;align:left"
         data-options="
            data: data,
            rownumbers: true,
            idField: 'id',
            treeField: 'name',
            onLoadSuccess: function(row){
               $(this).treegrid('enableDnd', row?row.id:null);
            }
         ">
..
</table>

and

Right table:

<table id="tg2" title="Folder Browser 2" class="easyui-treegrid" style="width:50%;height:250px;align:right"
         data-options="
            data: data2,
            rownumbers: true,
            idField: 'id',
            treeField: 'name',
            onLoadSuccess: function(row){
               $(this).treegrid('enableDnd', row?row.id:null);
            }
         ">
..
</table>

The tables remain aligned vertically - the first above the second.

I suspect my codes for the left and right align are incorrect.

Is there a way to correctly specify the alignment so that the tables left and right align?

Many thanks,

Alastair

[stworthy]

No 'align' property is available in treegrid plugin. To solve this issue, you can declare two <div> elements and place the treegrid components to each of <div> elements.

Code:

<div style="width:49%;float:left">
	<table class="easyui-treegrid" style="width:100%;height:250px">
		...
	</table>
</div>
<div style="width:49%;float:right">
	<table class="easyui-treegrid" style="width:100%;height:250px">
		...
	</table>
</div>

[alastairwalker]

I get it!

Thank you very much!

Alastair