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

span header and align sort icon next to the header's name

I work with angular 8. 
  • I want to remove vertical lines between fields in headers. body of the table should be stay separate with vertical lines like the example image.
  • also I want to align sort icon next to the header name.
I attached my sample code to the thread.


Attachment: sampledatagrid_bdd1e350.zip

4 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 4, 2019 01:25 PM UTC

Hi Sasan, 

Greetings from Syncfusion support. 

Query#1 : I want to remove vertical lines between fields in headers. 
To achieve your requirement we suggest you to set the gridLines as Horizontal. It shows only horizontal line in the grid. Please refer the below documentation. 

<ejs-grid [dataSource]='data' height='315' gridLines=Horizontal’ > 


Query#2: also I want to align sort icon next to the header name. 
To achieve your requirement you have to change the filter icon’s margin. We have created the sample with your requirement , in that we dynamically change the filter icon’s margin value according to the headercell’s width and headertext’s width in dataBound event. Please refer the below code and sample for information. 

import { Component, OnInit,ViewChild } from '@angular/core'; 
import { data } from './datasource'; 
import {GridComponent} from '@syncfusion/ej2-angular-grids'; 
    selector: 'app-container', 
    template: `<ejs-grid #grid [dataSource]='data' gridLines= "Horizontal"  (dataBound)="dataBound($event)" [allowSorting]='true' height='315px'> 
export class AppComponent implements OnInit { 

    public data: Object[]; 
    public grid: GridComponent; 
    ngOnInit(): void { 
        this.data = data; 
       for (var i = 0; i < this.grid.getHeaderTable().querySelectorAll('.e-headercell').length; i++) {  
                var margin = this.grid.getHeaderTable().querySelectorAll('.e-headercell')[i].offsetWidth - (42+(this.grid.getHeaderTable().querySelectorAll('.e-headertext')[i].offsetWidth ) + 10);             // 42 - headerText padding & 10 is used for adjustment purpose 

                this.grid.getHeaderTable().querySelectorAll('.e-sortfilterdiv')[i].style.marginRight = margin  + "px"; 


Please get back to us if you need further assistance. 

Seeni Sakthi Kumar S 

SM Sasan Moshksar December 5, 2019 07:56 AM UTC


I tested your sample code but when I run I got error message  property offsetWidth and style does not exist. 
Even your sample code shows that these properties do not exist. I do not know, why your sample code is running even you have error.

This is from your sample link:

one more thing, I use Angular 8 that's why I have to use @ViewChild like this

Please let me know, how can i solve this errors!

SM Sasan Moshksar December 5, 2019 08:23 AM UTC

I convert it to HTML element to get offsetwidth and style. like this:
 var margin = (<HTMLElement>this.grid.getHeaderTable().querySelectorAll('.e-headercell')[i]).offsetWidth
(<HTMLElement>this.grid.getHeaderTable().querySelectorAll('.e-sortfilterdiv')[i]).style.marginRight = margin  + "px";

Thanks for your support!

PS Pavithra Subramaniyam Syncfusion Team December 6, 2019 04:48 AM UTC

Hi Sasan,  

Thanks for your update. 

Please contact us if you need any further assistance on Grid. As always, we will be happy to assist you.  

Pavithra S. 

Live Chat Icon For mobile
Up arrow icon