How to remove excessive margins in editable data grid

[Dan Towey]

I'm trying to remove the 15px right margin in the data grid headers and I nothing I override in CSS seems to eliminate all the wasted space.

I have tried the following in CSS with no luck:

.e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
  padding-left: 4px;
  padding-right: 4px;
  margin: 0px 0px 0px 0px;
}

e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
  padding-left: 4px;
  padding-right: 4px;
  margin: 0px 0px 0px 0px;
}

-Dan

[Dan Towey]

Hoping someone has dealt with this before and can help me?

[Suganya Gopinath]

Hi Dan,

Yes, we have forwarded issue this to the concern team. Team is validating and will update the details shortly.

Regards,

Suganya Gopinath.

[Joseph Christ Nithin Issack]

Dan,

  Based on your query, you want to remove the additional margins and padding in the header cell. Your requirement can be achieved by using the headerCellInfo event of the EJ2 Grid.

  Refer the below code example:

 

 

  headerCellInfo(args) {

    args.node.querySelector('.e-headercelldiv').style.padding = '0px';

    args.node.querySelector('.e-headercelldiv').style.margin = '0px';

  }

 

Sample: https://stackblitz.com/edit/angular-tnqgws?file=src%2Fapp.component.html,src%2Fapp.component.ts

Regards,

Joseph I.