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

[Sasan Moshksar]

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.

Thanks!

Attachment: sampledatagrid_bdd1e350.zip

[Seeni Sakthi Kumar Seeni Raj]

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. 

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

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

 

Sample : https://stackblitz.com/edit/angular-rmrgx8-8zxmzm?file=app.component.ts 

import { Component, OnInit,ViewChild } from '@angular/core'; 

import { data } from './datasource'; 

import {GridComponent} from '@syncfusion/ej2-angular-grids'; 

@Component({ 

    selector: 'app-container', 

    template: `<ejs-grid #grid [dataSource]='data' gridLines= "Horizontal"  (dataBound)="dataBound($event)" [allowSorting]='true' height='315px'> 

------- 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

    public data: Object[]; 

    @ViewChild('grid') 

    public grid: GridComponent; 

    ngOnInit(): void { 

        this.data = data; 

    } 

    dataBound(e){ 

       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. 

Regards, 

Seeni Sakthi Kumar S 

[Sasan Moshksar]

Hi,

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!

[Sasan Moshksar]

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!

[Pavithra Subramaniyam]

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.  

Regards,  

Pavithra S.