Stacked Header

[Muqofa Syinagha]

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

[Rajapandi Ravi]

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

[Muqofa Syinagha]

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

[Suganya Gopinath]

Hi Muqofa, 

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

[LRK]

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,

Raj

[Aishwarya Rameshbabu]

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

[LRK]

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.

[Aishwarya Rameshbabu]

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