We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Stacked Header

Hello, as the image display above. I need to make triple or more stacked header.
How do I achieve this? thanks.


7 Replies 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team March 16, 2023 12:44 PM UTC

Hi Muqofa,


Greetings from Syncfusion support


Based on your query we could see that you like to use the Nested level stacked header column in the Grid. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement.


 

@Html.EJS().Grid("Grid1").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowResizing(true).Toolbar(new List<string>() { "Add", "Delete", "Update", "Cancel" }).Columns(col =>

{

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add();

    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();

    col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add();

    col.HeaderText("New Header Level").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Columns(new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "Order Details", Columns = new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "135", HeaderText = "Order Date", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Format = "yMd", MinWidth = "10" }, new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "130", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, HeaderText = "Freight($)", Format = "C2", MinWidth = "10" } } },

        new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "Ship Details", Columns = new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "ShippedDate", Width = "140", HeaderText = "Shipped Date", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Format = "yMd", MinWidth = "10" }, new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "145", HeaderText = "Ship Country", MinWidth = "10" } } } }

    ).Add();

}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Render()

 


Sample: 


Screenshot:



Regards,

Rajapandi R


Attachment: 181000_a4515765.zip

Marked as answer

MS Muqofa Syinagha March 17, 2023 06:46 AM UTC

Thankyou for the answer, I'll try implement this on my project.  I'll be back later to mark your answer



SG Suganya Gopinath Syncfusion Team March 20, 2023 04:07 AM UTC

Hi Muqofa, 

We are glad to know that the provided solution helped to solve the issue. Please get back to us for further assistance.




LR LRK replied to Suganya Gopinath May 3, 2024 10:41 AM UTC

Hi,

I applied stacked header in my grid.

When I try to add additional columns by changing the data source, stacked headers are missing.


Can you suggest me with a work around for this issue?


Thanks,

RajImage_9123_1714732876033



AR Aishwarya Rameshbabu Syncfusion Team May 6, 2024 11:22 AM UTC

Hi,


We have attempted to replicate the problem you mentioned by updating the additional columns along with the stacked header columns in a sample. However, we were unable to reproduce the issue as the stacked header columns are displayed properly after dynamically adding additional columns by changing the dataSource.

If you are still experiencing difficulties with adding columns dynamically to stacked header columns, please provide us with the following information to further investigate the issue:

1. The version of the Syncfusion package you are currently using.

2. The column definition of stacked columns and the new columns, as well as the complete Grid rendering code and associated event handler functions.

3. The type of databinding used in the Grid (Remote or Local data).

4. If Remote data is being used, please share the adaptor details and code lines defining the DataManager.

5. If possible, please provide a simple issue replication and a video demonstration.

By providing these details, we will be able to accurately assess the reported issue and offer a prompt solution.


Regards

Aishwarya R



LR LRK replied to Aishwarya Rameshbabu May 8, 2024 09:27 AM UTC

Hi Team,


Thanks for the response.


I got the result based on below code.

[Index.cshtml]

 

 

document.getElementById('btnClick').onclick = () => {

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

      var newColumns = [

          {

              headerText: 'Shipping',

              textAlign: 'Center',

              columns: [

                  {

                      field: 'ShipAddress',

                      headerText: 'ShipAddress',

                      textAlign: 'Right',

                      width: 145,

                      minWidth: 10,

                  },

                  {

                      field: 'ShipName',

                      headerText: 'Ship Name',

                      width: 140,

                      minWidth: 10,

                  },

              ],

          },

      ];

      grid.setProperties({

          dataSource: hierarchyOrderdata,

          columns: [...grid.columns, ...newColumns],

      });

  };


Thanks.



AR Aishwarya Rameshbabu Syncfusion Team May 9, 2024 04:28 PM UTC

Hi,


We have created a sample based on the shared code example and attempted to replicate the reported issue but were unsuccessful. Please review the attached sample and video demonstration.

If you are still experiencing difficulties, kindly provide the requested information from our previous updated, including the complete grid rendering code, type of databinding, and Syncfusion package version.

If feasible, please share a simple issue replication sample or try to reproduce it using the provided sample. Providing these details will assist us in validating the issue and offering a prompt solution.

Regards

Aishwarya R


Attachment: 181000SampleFiles_8d634816.zip

Loader.
Live Chat Icon For mobile
Up arrow icon