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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

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
loading
Tags: Grid
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

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. 



<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'; 
@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
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!

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!

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon