Title: How to declare alignment in a toolbar declared as array
Post by: Juan Antonio Martínez on July 18, 2014, 02:39:52 AM
Hi all. This is my first post to this forum. I've not found notices on propper use, so apologizes if this is not the correct way to ask for help I have an on-the-fly declared datagrid, and so, toolbar is declared as an array. Is there any way to specify some of the buttons are left-aligned and some other with right alignment As HTML code It's easy to do:
<!-- BARRA DE TAREAS DE LA TABLA DE PRUEBAS-->
<div id="pruebas-toolbar" style="padding:5px 5px 25px 5px;">
<span style="float:left;">
<a id="pruebas-newBtn" href="#" class="easyui-linkbutton" onclick="newPrueba()">New prueba</a>
<a id="pruebas-editBtn" href="#" class="easyui-linkbutton" onclick="editPrueba()">Edit prueba</a>
<a id="pruebas-delBtn" href="#" class="easyui-linkbutton" onclick="deletePrueba()">Delete prueba</a>
</span>
<span style="float:right;">
<a id="pruebas-reloadBtn" href="#" class="easyui-linkbutton" onclick="reloadDatagrid() >Actualizar</a>
</span>
</div>
....
$('#pruebas-datagrid').datagrid({
...
toolbar: '#pruebas-toolbar',
...
But don't know how to do it if declared as an array: toolbar: [
{
id: 'pruebas-newBtn',
text: 'New prueba',
plain: true,
iconCls: 'icon-new',
handler: function(){newPrueba();}
},{
id: 'pruebas-editBtn',
text: 'Edit prueba',
plain: true,
iconCls: 'icon-edit',
handler: function(){editPrueba();}
},{
id: 'pruebas-delBtn',
text: 'Delete prueba',
plain: true,
iconCls: 'icon-delete',
handler: function(){deletePrueba();}
},{
id: 'prueba-reloadBtn',
text: 'Actualizar',
plain: true,
iconCls: 'icon-reload',
style: 'align:right', <<<<<<< How to tell toolbar that this item must be right aligned in toolbar?
handler: function(){reloadDatagrid();} // reload the pruebas data}
}
],
Perhaps declare an string var like first code and assigning to 'toolbar' property? An easy example on how to do this?. Thanks in advance Juan Antonio
Title: Re: How to declare alignment in a toolbar declared as array
Post by: stworthy on July 18, 2014, 06:20:03 PM
Please extend a new method 'buildToolbar' to build tools with 'align' property. $.extend($.fn.datagrid.methods, {
buildToolbar: function(jq, items){
return jq.each(function(){
var p = $(this).datagrid('getPanel');
p.children('div.datagrid-toolbar').remove();
var tb = $('<div class="datagrid-toolbar"></div>').prependTo(p);
$.map(items, function(item){
var t = $('<a href="javascript:void(0)"></a>').appendTo(tb);
t.linkbutton($.extend({}, item, {
onClick:function(){
if (item.handler){
item.handler.call(this);
}
if (item.onClick){
item.onClick.call(this);
}
}
}));
t.css('float', item.align || '');
})
})
}
});
Usage example: var items = [
{
id: 'pruebas-newBtn',
text: 'New prueba',
plain: true,
iconCls: 'icon-new',
onClick:function(){console.log('cc')},
handler: function(){newPrueba();}
},{
id: 'pruebas-editBtn',
text: 'Edit prueba',
plain: true,
iconCls: 'icon-edit',
handler: function(){editPrueba();}
},{
id: 'pruebas-delBtn',
text: 'Delete prueba',
plain: true,
iconCls: 'icon-delete',
handler: function(){deletePrueba();}
},{
id: 'prueba-reloadBtn',
text: 'Actualizar',
plain: true,
iconCls: 'icon-reload',
align: 'right', // How to tell toolbar that this item must be right aligned in toolbar?
handler: function(){reloadDatagrid();} // reload the pruebas data}
}];
$('#dg').datagrid('buildToolbar', items)
Title: Re: How to declare alignment in a toolbar declared as array
Post by: Juan Antonio Martínez on July 21, 2014, 12:06:54 AM
Works, great! Thanks a lot.
Cheers
Juan Antonio
|