Switch the grouping and the actions toolbar rows

[Antonio]

Good morning, I'm new to the forum and I'm using SyncFusion Grid component for React.

I'm working on the UX about it. I would like to know if there is any way to switch the two toolbar rows, the actions and the column grouping rows, as in the screenshot below. I have read the documentation but unfortunately didn't find anything.

Best regards,

Antonio

P.s.: I'm new to the forum, apologizes if I'm doing something wrong with this post :)

[Manivel Sellamuthu]

Hi Antonio, 

Greetings from Syncfusion support. 

You can achieve your requirement by using the created event of  the Grid. In that event we have swapped the grid group drag area and grid toolbar. Please refer the below code example and sample for more information. 

export class Grouping extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

    } 

    created() { 

// here we are inserting the group element before the header element 

this.gridInstance.element.insertBefore(this.gridInstance.groupModule.element, this.gridInstance.getHeaderContent()); 

    } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent dataSource={inventoryData} toolbar={this.toolbarOptions} allowPaging={true}  

ref={grid => this.gridInstance = grid} pageSettings={{ pageCount: 5 }} allowGrouping={true} allowSorting={true} height="320" created={this.created.bind(this)}> 

                        <ColumnsDirective> 

. . . 

                        <Inject services={[Page, Group,Toolbar, Sort, Edit]}/> 

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

Sample: https://stackblitz.com/edit/react-166541-sample?file=index.js 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[Antonio]

Thank you very much for your support!

Best regards,

AP

[Manivel Sellamuthu]

Hi Antonio, 

Thanks for your update. 

We are glad that the provided solution worked. 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[Christopher Engalla]

Hi!

I have the same requirement.

Do you have sample solution for Angular 14?

For @syncfusion/ej2-angular-base": "20.3.56"

Thanks.

// Chris

[Pavithra Subramaniyam]

Hi Christopher,

Based on your requirement we have prepared an EJ2 angular Grid sample for moving the group header next to the toolbar. Please refer to the below sample link for more information.

https://stackblitz.com/edit/angular-6carzh?file=src%2Fapp.component.ts

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

Regards,

Pavithra S

[Barna Wesley]

Do you have an example of how to do this with the .netcore grid, version 24.1.47?

[Dineshnarasimman Muthu]

Hi Barna Wesley,

We understand that your requirement is to place the group drop area below the toolbar element in the .NET Core platform. As suggested earlier, in the created event of the grid, get the group drop element using gridInstance.groupModule and append before the header using insertBefore() method and gridInstance.getHeaderContent() method. The code snippet of the implementation and sample have been attached for your reference.

<ejs-grid id="Grid" dataSource="@order" allowPaging='true'  allowGrouping="true" created="created" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">

   

 

<script>

    function created()

    {

        var grid=document.getElementById('Grid').ej2_instances[0];

        grid.element.insertBefore(grid.groupModule.element,grid.getHeaderContent());

    }

</script>

 

Image:

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M

Attachment: GroupAreaAndToolbar_d10eacde.zip

[Barna Wesley]

Thank you so much.  Suggested changes works for .netcore

[Getsy Edwin]

Barna,

You're welcome!! Please feel free to contact us for further assistance.