Hi Cosmin,
Thanks for contacting
Syncfusion support.
Based on the theme
specification, the default margin and padding are set to the filter icon and
sort icon. So, there is some space available between the header text and
the sort icon. This is the behavior of Grid structure.
In your requirement, you
want to move the sort icon near to the HeaderText. We achieved your requirement
in the dataBound event of Grid.
dataBound: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound
In that event, we
dynamically changed the margin of the sort icon based on the headerText width
and headerCellDiv width. Refer to the below code example and sample for more
information.
|
[app.component.ts]
dataBound(args) {
var headercells = this.grid.element.querySelectorAll('.e-headercell');
for (var i = 0; i < headercells.length; i++) {
var headertextwidth = headercells[i].querySelector('.e-headertext').getBoundingClientRect().width;
var headercelldivwidth = headercells[i].querySelector('.e-headercelldiv').getBoundingClientRect().width;
var calx = parseInt((headercelldivwidth / headertextwidth + (headercelldivwidth - headertextwidth - 25)) as any);
// margin calculation
var sortMargin = '-16px ' + calx + 'px';
var sortRightMargin = '-16px ' + (calx - 5) + 'px';
var sortCenterMargin = '-16px ' + (calx + 5) + 'px';
// change the sorticon margin
if (headercells[i].classList.contains('e-rightalign')) {
headercells[i].querySelector('.e-sortfilterdiv.e-icons').style.margin = sortRightMargin;
} else if (headercells[i].classList.contains('e-centeralign')) {
headercells[i].querySelector('.e-sortfilterdiv.e-icons').style.margin = sortCenterMargin;
} else {
headercells[i].querySelector('.e-sortfilterdiv.e-icons').style.margin = sortMargin;
}
}
}
|
Sample: https://stackblitz.com/edit/angular-s61o7p-wzbkf1?file=app.component.ts
Regards,
Rajapandiyan S
