Hi Sphere ,
Thanks for your patience .
Query : Keeps text color in column when clicking sorting
Based on your query, you want to change the style to the
specific column called "Customer Name". We accomplished this using
the headerCellInfo event, and we are overriding the default CSS in the
special class for sorting ("color:black") .
For your convenience, we have attached code sample for your
reference.
|
[in
html]
<ejs-grid
class="sortingenabled"
id="Grid"
[dataSource]="data"
actionBegin="actionBegin"
allowPaging="true"
allowSorting="true"
[sortSettings]="initialSort"
[pageSettings]="pageSettings"
(headerCellInfo)="headerCellInfo($event)"
>
[in
ts]
headerCellInfo(args) {
if (args.cell.column.field === 'CustomerName') {
var classData = args.node;
classData.classList.add('Customised');
}
}
[in
css]
.e-headercell.Customised.e-mousepointer {
color: rgb(227, 15, 235);
background-color: black !important;
font-family: 'Bell MT';
}
.e-grid th.e-headercell[aria-sort='ascending'] .e-headertext {
color: rgb(227, 15, 235);
}
.e-grid th.e-headercell[aria-sort='descending'] .e-headertext {
color: rgb(227, 15, 235);
}
|
Sample link : https://stackblitz.com/edit/angular-sgjwkg-23ashu?file=app.component.css,app.component.ts,app.component.html,main.ts
Documentation link : https://ej2.syncfusion.com/angular/documentation/api/grid/#headercellinfo
Kindly get back to us if you need further assistance on
this.
Regards,
Vinitha Balasubramanian
