Ej2 Grid: Ordering Grid Toolbar Based on Order of Appearance of Toolbar Array

[ISMAIL HAMZAH]

Hello,

How to order grid toolbar based on order of appearance of toolbar array? Below are my toolbar array, from the array, the search box should appear first, excel report second and so on. But if you see my capture below, it does not follow the toolbar array appearance.

        toolbar: [

            'Search', 'ExcelExport',

            { type: 'Separator' },

            { text: 'Add', tooltipText: 'Add', prefixIcon: 'e-add', id: 'AddCustom' },

            { text: 'Edit', tooltipText: 'Edit', prefixIcon: 'e-edit', id: 'EditCustom' },

            { text: 'Delete', tooltipText: 'Delete', prefixIcon: 'e-delete', id: 'DeleteCustom' },

            { type: 'Separator'},

            { text: 'Details', tooltipText: 'Details', prefixIcon: '', id: 'DetailsCustom' },

            { type: 'Separator' },

            { text: 'Confirm Order', tooltipText: 'Confirm Order', prefixIcon: '', id: 'ConfirmOrder' },

            { text: 'Cancel Order', tooltipText: 'Cancel Order', prefixIcon: '', id: 'CancelOrder' },

            { type: 'Separator' },

            { text: 'Receipt Lookup', tooltipText: 'Purchase Receipt', prefixIcon: '', id: 'ReceiptLookup' },

            { text: 'Generate Confirm Receipt', tooltipText: 'Generate Confirm Receipt', prefixIcon: '', id: 'ConfirmReceipt' },

            { text: 'Generate Draft Receipt', tooltipText: 'Generate Draft Receipt', prefixIcon: '', id: 'DraftReceipt' },

            { type: 'Separator' },

        ],

How is the best way to order the toolbar appearance?

Best regards,

Ismail

[Rajapandiyan Settu]

Hi ISMAIL, 

 

Greetings from Syncfusion support. 

 

Query #1: How to order grid toolbar based on order of appearance of toolbar array? Below are my toolbar array, from the array, the search box should appear first, excel report second and so on.  

 

Based on the Grid architecture, the search box is always shown in the right side of Grid toolbar. If you want to show the search box at the first position of toolbar, please use the below code in the dataBound and custom CSS to achieve this. 

 

dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 

 

 

[index.js] 

 

var grid = new ej.grids.Grid({ 

  ----- 

  toolbar: [ 

    'Search', 

    'ExcelExport', 

 

    { type: 'Separator' }, 

 

    { text: 'Add', tooltipText: 'Add', prefixIcon: 'e-add', id: 'AddCustom' }, 

    ----- 

  ], 

  ---- 

  toolbarClick: toolbarClick, 

  dataBound: dataBound 

}); 

grid.appendTo('#Grid'); 

 

function toolbarClick(args) {} 

 

function dataBound(args) { 

  // change the position of left toolbar items 

  grid.element.querySelector('.e-toolbar-left').style.left =  

      grid.element.querySelector('.e-toolbar-right').getBoundingClientRect().width + 'px'; 

} 

 

 

[index.html] 

 

 

    <style> 

        .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right { 

            left: 0; 

        } 

    </style> 

 

 

 

We have prepared the sample for your reference. You can get it from the below link. 

 

Sample: https://stackblitz.com/edit/8qhtth?file=index.js 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[ISMAIL HAMZAH]

Hello Rajapandiyan,

Thank you for your update. Your solution successfully move the search box become the first on the left:

Thank you for your kind help and support.

Best regards,

Ismail

[ISMAIL HAMZAH]

Hello Rajapandiyan,

After testing to another grid with overflowMode set to 'MultiRow', your provided solution did not work. The searchbox did not move to the first left most of the grid:

Could you please help me again with this

Thanks in advance

Best regards,

Ismail

[Rajapandiyan Settu]

Hi ISMAIL, 

 

Thanks for your update. 

 

Query: After testing to another grid with overflowMode set to 'MultiRow', your provided solution did not work. The searchbox did not move to the first left most of the grid.  

 

We have validated your requirement and you can resolve this by using following code example in the dataBound event of Grid. 

 

dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 

 

 

[index.js] 

 

 

function dataBound(args) { 

  grid.toolbarModule.element.ej2_instances[0].overflowMode = 'MultiRow'; 

  var toolbarrightele = grid.element.querySelector('.e-toolbar-right'); 

  toolbarrightele.parentElement.insertBefore( toolbarrightele, toolbarrightele.parentElement.children[0] ); 

  setTimeout(() => { 

    if (grid.element.querySelector('.e-toolbar-left').style.marginLeft) { 

      grid.element.querySelector('.e-toolbar-left').style.marginLeft = grid.element.querySelector('.e-toolbar-right').getBoundingClientRect() .width + 'px'; 

    } 

  }, 100); 

} 

 

 

Find the below sample for your reference. 

 

Sample: https://stackblitz.com/edit/8qhtth-duwis6?file=index.js 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[ISMAIL HAMZAH]

Hello Rajapandiyan,

Thank you for your update info. Your provided solution can solve my problem:

Thank you for your kind support.

Best regards,

Ismail

[Rajapandiyan Settu]

Hi ISMAIL, 

 

We are glad that you have achieved your requirement with the provided solution. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rajapandiyan S