Does the Data Grid support sub-headings?

[Phil Haselden]

Hi,

I have designed a UI we want to have subheadings in the grid. The data rows and subheadings should support drag-and-drop for reordering. Dragging a subheading, also drags all the rows under the subheading.

For example, the grid might look like this:

ID    | Description     
-----------------------------
123   |  First data row       
My heading
242   |  Second data row
145   |  Third row
Another heading
9     |  The last row

We investigated the Grouping feature, however:

• The group names are always shown in alphabetical order. We want the user to be able to drag-and-dop the headings to reorder them.
• Groups require that there are data rows in the grid, since the grouping is based on a column from the data. Ideally, we would like the ability to create and manage subheadings even if there are no data rows. 

Is this functionality you support, or plan to support?

Thanks, 

Phil

[Sivaranjani Rajasekaran]

Hi Phil Haselden,

Greetings from Syncfusion support!

We understand that you are looking to implement subheadings within the EJ2 Grid, where both data rows and subheadings can be reordered using drag-and-drop. Specifically, you want the ability to:

• Add subheadings between rows.
• Drag a subheading along with its associated data rows.
• Reorder subheadings freely (not alphabetically).
• Create and manage subheadings even when no data rows are present.

Currently, the EJ2 Grid does not support this functionality. The grouping feature in the Grid is based on data columns and automatically sorts group headers alphabetically. It also requires data rows to be present for grouping to work.

Recommended solution : 

We recommend using the Syncfusion Tree Grid component instead. It is designed for hierarchical data structures and offers:

• Built-in support for row drag-and-drop.
• Hierarchical relationships between parent (subheading) and child (data row) elements.
• Flexibility to customize the structure, including adding nodes without child rows.

This approach aligns more closely with your requirements and provides a more intuitive way to manage grouped data with drag-and-drop capabilities.

Screenshot:

 

Note : You can customize the structure based on your specific needs.

For more information, please visit the documentation and sample Link Below

Sample Link : https://stackblitz.com/edit/rzhcnuqh?file=src%2FApp.vue

Documentation Link : https://ej2.syncfusion.com/vue/documentation/treegrid/row/row-drag-and-drop#drag-and-drop-within-tree-grid

Demo : Tree Grid · Default Functionalities · Syncfusion Vue UI Components

Please get back to us if you need further assistance

 

Regards,

Sivaranjani R.

[Phil Haselden]

Thanks for the response. We'll look into that. 

[Sivaranjani Rajasekaran]

Phil Haselden,

You are most welcome! Please get back to us if you need further assistance!