Ej2 Grid: How to make the toolbar automatically spread into multiple rows (vertical)
Hello,
I have a lot of custom toolbar on my grid. The default behavior is the toolbar will be expanded horizontally like picture below:
My question, is it possible to spread the toolbar into multiple rows? so it will expanded vertically and the toolbar items will be all shown. So no need to navigate the toolbar using "kind of" left or right navigation button.
Thank you in advance
Best regards,
Ismail
|
var grid = new ej.grids.Grid({
dataSource: window.orderDataSource,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition:'Top' },
allowPaging: true,
pageSettings: { pageCount: 5 },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search', 'Print', 'ExcelExport', 'PdfExport', 'ColumnChooser', 'WordExport', { text: 'Custom button'}, {text: 'Copy'}, {text: 'Paste'}, {text: 'Open'}, {text: 'Close'}, {text: 'Cut'}, {text: 'Drag'}, {text: 'RowHeight'}],
actionBegin: actionBegin,
dataBound: function() { //dataBound event of Grid
grid.toolbarModule.element.ej2_instances[0].overflowMode = 'MultiRow'; //set the overflowmode as MultiRow to spread the toolbar item into multiple rows
},
columns: [
. . . . . . . . . . .
. . . . . . . . . . .
],
});
grid.appendTo('#Grid');
|
Rajapandi R
Hello Rajapandi,
Thank you for your support. I have try it out and its work, the toolbar layout become multi row. But come new problem, the paging is become missing? For your information, I calculate the height for the grid at grid created handler to fit di vertical size.
below image is before multi row toolbar: (highlight the paging is there)
below image is after multi row toolbar: (highlight the paging is missing)
do you have any recommendation for solving this problem? below is code to calculate the grid height:
beforeDataBound: () => {
grid.showSpinner();
},
dataBound: () => {
grid.toolbarModule.element.ej2_instances[0].overflowMode = 'MultiRow';
grid.hideSpinner();
},
excelExportComplete: () => {
grid.hideSpinner();
},
created: () => {
var gridHeight = ($(".pcoded-main-container").height()) - ($(".e-gridheader").outerHeight()) - ($(".e-toolbar").outerHeight()) - ($(".e-gridpager").outerHeight());
grid.height = gridHeight;
},
Thank you in advance
Best regard
|
dataBound: function() { //dataBound event of Grid
grid.toolbarModule.element.ej2_instances[0].overflowMode = 'MultiRow'; //set the overflowmode as MultiRow to spread the toolbar item into multiple rows
},
|
Hello Rajapandi,
Thank you for your update. I need to recalculate the grid height because I need precise grid height, why am doing this? this is because by design, I have turned off the browser vertical scroll bar. I'm doing that because I want consistent and focused UI to grid. So when user navigating the data, he/she only use grid vertical scroll bar which result very nice UI because the static header and the grid column title did not move around.
Basically I got the grid height by calculating total height minus header height minus toolbar height minus pager height. The formula is already OK, but it seems I should put the calculation in another place not in grid created event? Place where the multi row toolbar height already known in advance.
Below is normal situation with single row toolbar:
Best regards,
Ismail
