datagrid: vertical toolbar

[korenanzo]

Could be possible  to put the data grid toolbar in  vertical mode, in left or right position?  

something like




(no matter if not thin as the example ... well, if could be possible to make it so thin , would be better

[jarry]

No, but you can put the toolbar in the west region of a layout. Please look at this example http://code.reloado.com/onetus/edit#preview

[korenanzo]

It's a good solution, thank you!

[korenanzo]

Even if it is a good solution, I'd have problems with the rest of  my layout and positioning system, so I am asking for an alternative:


could be possible to move the toolbar overriding or modifying the css? For example  for  the classes datagrid-toolbar and  datagrid-view?

Thanks,

Riccardo

[jarry]

No, the toolbar can not be set vertically. If you don't wish to use the layout, please try to use the float <div> elements that split the toolbar and datagrid.

Code:

<div style="float:left;width:32px">
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-remove"></a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
<div style="float:left;width:700px">
	<table class="easyui-datagrid" style="width:100%;height:250px"
			data-options="rownumbers:true,singleSelect:true,data:data">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:240">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
</div>

[korenanzo]

I don't understand how to do it at runtime, with javascript:

I create  the grid at runtime, in this way:

Code:

	var o = $('<table  id="' + myId + '"  ></table>');
b.append(o)
o.datagrid({...})

please consider that I use datagrid-scrollview + datagrid-cellediting;

the resulting html is, more or less:



thanks,

Ric

[jarry]

Please look at this example http://code.reloado.com/iwucey3/edit#preview

[devnull]

Please look at this example http://code.reloado.com/iwucey3/edit#preview

That looks great !

[korenanzo]

I finally reached the goal:

1) created a div with buttons as in your last example
2) connected to the  datafrid toolbar: datagrid.toolbar = '#mynewtb'
3) modified the css:

Code:

 .datagrid-toolbar {
	 width:32px; 
	 height:auto;
	 float:left; 
	 position:fixed;
	 
 }
 .datagrid-view {
	 float:right; 
	 left:32px;
	 
}

http://code.reloado.com/iwucey3/5/edit

the result is not perfect: for example the view width and height should be resized ,but could be a  good starting point....