EasyUI Forum

How to add combobox to toolbar of datagrid with  programming instead of html tag?

I was also wondering how to do this but the answer is quite easy (of course there could be other ways to do this). I just mixed the 2 methods. I added the Toolbar part via HTML and the rest via JavaScript. For example;

Javascript Part
$('#dg').datagrid({
   fit: true,
   idField: 'date',
   columns: [[
      { field: 'date', title: 'Date', width: 80 },
      { field: 'desc', title: 'Description', width: 300 },
      { field: 'amount', title: 'Amount', width: 800, align: 'right'}
   ]]
});

HTML Part
<table id="dg" toolbar="#toolbar" ></table>
<div id="toolbar">
   <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">Edit</a>
   <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()">Save</a>
   <label>Select Option:</label>
   <select id="selection">
      <option value="1">Option1</option>
      <option value="2">Option2</option>
      <option value="3">Option3</option>
   </select>
</div>

Adding a seperator is also pretty easy via HTML but you need to add the following style to the anchor tags (as per the example above);  style="float: left;"
Thus the a tags would read;
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()" style="float: left;">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()" style="float: left;">Save</a>

Now just insert the following code where you want the seperator to appear;
<div class="datagrid-btn-separator"></div>