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

EjsGrid Stacked Headers


I'm looking for some assistance implementing a stack header in a Blazor EjsGrid.  

Here's my attempt on how it might work, I wasn't able to find any documentation on how to do this so it's a logical guess:

<EjsGrid ref="gridSupplierItem" id="SupplierItemGrid" DataSource="@supplierItemList" AllowPaging="false" AllowSorting="false">
                        <GridColumn HeaderText="Supplier Item Data" Width="210">
                                 <GridColumn Field=@nameof(SupplierItemSkuMinderSku.SupplierItemCode) HeaderText="Code" Width="50"></GridColumn>
                                 <GridColumn Field=@nameof(SupplierItemSkuMinderSku.SupplierItemName) HeaderText="Name" Width="100"></GridColumn>
                                 <GridColumn Field=@nameof(SupplierItemSkuMinderSku.SupplierItemCost) HeaderText="Cost" Format="C2" Width="30"></GridColumn>
                                 <GridColumn Field=@nameof(SupplierItemSkuMinderSku.SupplierItemRRP) HeaderText="RRP" Format="C2" Width="30"></GridColumn>

The output would be:
Header 1 Stacked Header: Supplier Item Data
Header 2 Column Headings: Code, Name, Cost, RRP  

Thanks in advance,


3 Replies

GS Gurupriyadharshini Sankaranarayanan Syncfusion Team June 13, 2019 07:09 AM UTC

Hi Chris 
Thanks for contacting Syncfusion support. 
We have checked your query and you can achieve your requirement by using the below way. We have prepared a simple sample in which stacked header column is included. Please refer the following code snippet and sample link. 
<EjsGrid id="Grid" DataSource="@gridData" AllowPaging="true"> 
    <GridPageSettings PageSize="5"></GridPageSettings>   
        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="@TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn HeaderText=" Order Details" Columns="@( new List<@GridColumn>(){       
                    new Syncfusion.EJ2.RazorComponents.Grids.GridColumn{ Field = nameof(OrdersDetails.OrderDate), HeaderText = "Order Date", Format="yMd" }, 
                    new Syncfusion.EJ2.RazorComponents.Grids.GridColumn { Field = nameof(OrdersDetails.Freight), HeaderText = "Freight($)", Format="C2" } } )"> 
          .   .   .   .   .  
    public List<OrdersDetails> gridData { get; set; } 
    protected override void OnInit() 
        gridData = OrdersDetails.GetAllRecords(); 

Please get back to us for further assistance. 

Gurupriyadharshini S. 

CH Chris June 13, 2019 10:32 PM UTC

Thanks Gurupriyadharshini S for the example. 

GS Gurupriyadharshini Sankaranarayanan Syncfusion Team June 14, 2019 05:27 AM UTC

Hi Chris 
Thanks for your update. 
Please get back to us if you need further assistance. 
Gurupriyadharshini S 

Live Chat Icon For mobile
Up arrow icon