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.