Add a new section between toolbar and header row?

Question

Hello,I would like to either show a specific set of toolbar items on a new row (2 rows, one specific set on each row) or add an entirely new section between the toolbar and the header row of a datagrid. I was curious of the best way to achieve this with syncfusion?

Sujith Kumar Rajkumar · Accepted Answer

Hi Charlie, 
 
Thanks for sharing the details. 
 
You can achieve your requirement of rendering an custom toolbar between the Grid’s default toolbar and the header section by using the Grid’s created event to dynamically render and append the EJ2 Toolbar between these elements. 
 
This is demonstrated in the below code snippet, 
 




// Grid’s created event handler 
function created() { 
    // A new div element is created and appended between the Grid default toolbar and header elements 
    var newEle = document.createElement('div'); 
    grid.element.insertBefore(newEle, grid.headerModule.headerPanel); 
    // The EJ2 Toolbar control is initialized with the required items 
    var customToolbar = new ej.navigations.Toolbar({ 
        items: [ 
          { text: 'Custom Action 1' }, 
          { text: 'Custom Action 2' } 
        ], 
        clicked: customToolClick 
    }); 
    // Render initialized Toolbar control on the newly created element 
    customToolbar.appendTo(newEle); 
} 
 
// Custom toolbar’s clicked event handler 
function customToolClick(args) { 
    alert('Custom toolbar item clicked') 
} 
 
We have prepared a EJ2 Grid(ES5) sample to demonstrate this case for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/vhxp4g 
 
More details on the EJ2 Toolbar can be checked in the below documentation link, 
 
Documentation: https://ej2.syncfusion.com/javascript/documentation/toolbar/getting-started/ 
 
API: https://ej2.syncfusion.com/documentation/api/grid/#created 
        https://ej2.syncfusion.com/documentation/api/toolbar/#clicked 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Sujith Kumar Rajkumar · Answer

Hi Charlie, 
 
Greetings from Syncfusion support. 
 
We are not clear on your exact requirement from the provided information. So can you please share us the following details to understand it better, 
 

Is your requirement to render multiple toolbars in the Grid or just an empty header section(with your required customization) between the toolbar and the content section?
Share us a pictorial representation of your use case.
 
Regards, 
Sujith R

Charlie Sexton · Answer

Hello,       Multiple toolbars would solve my requirement. However, I would want to keep the standard grid toolbar on top of the second toolbar.

Sujith Kumar Rajkumar · Answer

Hi Charlie, 
 
Thanks for the confirmation. 
 
Before proceeding with the query can you please let us know your use case scenario for rendering two toolbar’s in the Grid component. For instance, is your case to avoid using arrow keys in toolbar when there are many items loaded and use multiple toolbars instead or just to show two toolbars in the Grid. If not, please let us know your exact requirement scenario to validate further based on that. 
 
Regards, 
Sujith R

Charlie Sexton · Answer

Hello,

Not displaying the arrows is one problem but overall the reason for this is just UI/UX. I need a new section to display an entirely different set of toolbar items or controls based on the table. Having the two sections would improve the user interface in terms of usability as the items will be unrelated. Pretty much I need the ability to show some additional dropdowns, checkboxes etc.. for filtering the data. We have too much data and this has to be done in raw sql.

Charlie Sexton · Answer

Thank you, I started down the path of using a custom toolbar template but will try the created event and inserting an additional toolbar. The custom toolbar template for the grid produced its own set of problems that hopefully this solves.

Sujith Kumar Rajkumar · Answer

Hi Charlie, 
 
Thanks for the update. Please get back to us if you require further assistance. 
 
Regards, 
Sujith R