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

Sasan Moshksar

Asked On December 4, 2019 07:40 AM UTC

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

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

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

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

Reply | Reply with quote

Sasan Moshksar

Replied On December 5, 2019 07:56 AM UTC

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!

Reply | Reply with quote

Sasan Moshksar

Replied On 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!

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

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

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149623	Dec 3,2019 05:31 PM UTC	Dec 6,2019 04:48 AM UTC	Angular - EJ 2	4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US