Multi Line Header

[Ricardo Salas]

Can you explain me which is the correct way to create a multi line header, resize the header's height to fit this multi line header and also center the text in it?

Thanks

[Rajapandiyan Settu]

Hi Ricardo, 

Greetings from syncfusion support. 

 

Query : Can you explain me which is the correct way to create a multi line header, resize the header's height to fit this multi line header and also center the text in it? 

In EJ2 Grid we have the support to wrap the text content in the cell. If the cell’s content width exceeds the column’s width the grid automatically wrap this content when textWrapSettings applied in it. 

Please refer the below documentation for detail information. 

UG : https://ej2.syncfusion.com/angular/documentation/grid/cell/#auto-wrap 

To align the text in center use the column API textAlign as center 

UG : https://ej2.syncfusion.com/angular/documentation/api/grid/columnModel/#textalign 

If this is not your requirement, can you please explain your requirement in detail with some pictorial representation. 

Regards, 

Rajapandiyan S 

[Ricardo Salas]

I don't want the text in the header to be wrapped automatically. I want to have a header composed of two lines of text, no matter the width of the column.

[Rajapandiyan Settu]

Hi Ricardo, 

Thanks for your update. 

 

Query : I don't want the text in the header to be wrapped automatically. I want to have a header composed of two lines of text, no matter the width of the column. 

You can achieve you requirement by using headerTemplate feature. We have created a sample with this and changed the height of headercelldiv element as auto in the dataBound event of grid. Please refer the below code example and sample for more information. 

App.component.html 

<ejs-grid #grid id='Grid' [dataSource]='data' height='272px' [allowPaging]=true   

(dataBound)="dataBound($event)"> 

  <e-columns> 

    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 

    <e-column field='CustomerID' headerText='Customer ID' width=150> 

      <ng-template #headerTemplate let-data> 

        <span> 

            <div> Customer ID 

            </div> 

            <div> Customer Name 

            </div> 

         </span> 

      </ng-template> 

    </e-column> 

    <e-column field='ShipName' headerText='ShipName' width=150></e-column> 

    <e-column field='ShipCity' headerText='Ship City' width=150></e-column> 

  </e-columns> 

</ejs-grid> 

<style> 

  .e-grid .e-headercell { 

    padding: 10px 21px 10px; // set the paddings in header 

  } 

</style> 

App.component.ts 

export class AppComponent implements OnInit { 

  @ViewChild('grid', { static: true }) public grid: GridComponent; 

  public data: object[]; 

  ngOnInit(): void { 

    this.data = hierarchyOrderdata; 

  } 

  dataBound(args){ 

// get the headercelldiv elements 

    var headercelldiv = this.grid.element.getElementsByClassName("e-headercelldiv"); 

    for (var i=0; i<headercelldiv.length; i++){ 

// set the height as auto 

      headercelldiv[i].style.height = 'auto'; 

    }; 

  } 

} 

 

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

UG : https://ej2.syncfusion.com/angular/documentation/grid/columns/?no-cache=1#header-template 

         https://ej2.syncfusion.com/angular/documentation/api/grid#databound 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S