EjsGrid Stacked Headers

[Chris]

Hi,

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">

                <GridColumns>

                        <GridColumn HeaderText="Supplier Item Data" Width="210">

                             <GridColumns>

                                 <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>

                             </GridColumns>

                      </GridColumn>

                </GridColumns>

</EjsGrid>

The output would be:

Header 1 Stacked Header: Supplier Item Data

Header 2 Column Headings: Code, Name, Cost, RRP  

Thanks in advance,

Chris

[Gurupriyadharshini Sankaranarayanan]

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. 

 

[Index.razor] 

<EjsGrid id="Grid" DataSource="@gridData" AllowPaging="true"> 

    <GridPageSettings PageSize="5"></GridPageSettings>   

    <GridColumns> 

        <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" } } )"> 

    </GridColumn> 

          .   .   .   .   .  

    </GridColumns> 

</EjsGrid> 

 

@functions{ 

    public List<OrdersDetails> gridData { get; set; } 

    protected override void OnInit() 

    { 

        gridData = OrdersDetails.GetAllRecords(); 

    } 

} 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridedit775321516  

 

Please get back to us for further assistance. 

Regards, 

Gurupriyadharshini S. 

 

[Chris]

Thanks Gurupriyadharshini S for the example. 

[Gurupriyadharshini Sankaranarayanan]

Hi Chris,  

   

Thanks for your update. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Gurupriyadharshini S