Print Page - Placing two treegrids alongside each other

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

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>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: alastairwalker on August 19, 2014, 06:11:59 AM