row grouping of ejs-grid angular

[Narsimsetty Chalamaiah]

Hello Team,

i am attaching document for  row grouping  in ejs- grid angualr. 

please send code asap.

Thanks & Regards

Chalamaiah N

Attachment: grooping_row_ejs_grid_c5e7b2f4.zip

[Vignesh Sivagnanam]

Hi Narsimsetty 

Greetings from Syncfusion support 

Based on your attached image, we understand that you want to render stacked header column in the grid. You can achieve your requirement by using the below code. Please refer the below code example and sample for your reference, 

Code Example: 

app.component.html: 

<div class="control-section"> 

  <ejs-grid [dataSource]="data" [allowPaging]='true'> 

    <e-columns> 

      <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Center" minWidth=10></e-column> 

      <e-column headerText='Order Details' [columns]='orderColumns'></e-column> 

      <e-column headerText='Ship Details' [columns]='shipColumns'></e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

app.component.ts: 

export class AppComponent { 

  public data: Object[] = []; 

  public orderColumns: ColumnModel[]; 

  public shipColumns: ColumnModel[]; 

  public ngOnInit(): void { 

    this.data = orderDetails; 

    this.orderColumns = [ 

      { 

        field: "OrderDate", 

        headerText: "Order Date", 

        format: "yMd", 

        width: 130, 

        textAlign: "Right", 

        minWidth: 10 

      }, 

      { 

        field: "Freight", 

        headerText: "Freight ($)", 

        width: 120, 

        format: "C1", 

        textAlign: "Right", 

        minWidth: 10 

      } 

    ]; 

    this.shipColumns = [ 

      { 

        field: "ShippedDate", 

        headerText: "Shipped Date", 

        format: "yMd", 

        textAlign: "Right", 

        width: 150, 

        minWidth: 10 

      }, 

      { 

        field: "ShipCountry", 

        headerText: "Ship Country", 

        width: 150, 

        minWidth: 10 

      }, 

      { 

        field: "ShipAddress", 

        headerText: "Ship Address", 

        width: 120 

      } 

    ]; 

  } 

} 

Sample : https://stackblitz.com/edit/angular-z9nx1l-fjw3dt?file=app.component.ts 

Demo : https://ej2.syncfusion.com/angular/demos/#/material/grid/column/stacked-header 

Regards 

Vignesh Sivagnanam