How to use DataGrid double Stacked Header?

[TaeWook Kang]

Hello,

I can use just stacked header,

i want use double stacked header in Grid.

For example, please look below

is it possible? 

if you can, please how to solve it.

Thank.

[Sujith Kumar Rajkumar]

Hi TaeWook, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement of rendering double stacked headers in the Grid as demonstrated in the below code snippet, 

 

@{ 

    var stackedHeader1 = new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "FirstName", HeaderText = "First Name"  }, new Syncfusion.EJ2.Grids.GridColumn { Field = "LastName", HeaderText = "Last Name" } }; 

    var stackedHeader2 = new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "City" }, new Syncfusion.EJ2.Grids.GridColumn { Field = "Country" } }; 

} 

 

<div id="parent"> 

    <ejs-grid id="Grid" dataSource="@ViewBag.datasource"> 

        <e-grid-columns> 

            <e-grid-column headerText="Employee Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "Name", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, Columns = stackedHeader1  }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "Location", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center, Columns = stackedHeader2  }} )"> 

            </e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170453/ze/GridWithStackedHeader-703370018 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R