How to show a default icon to show that the grid column can be sorted ?
Currently we are using the following to show ascending and descending icons on the Grid Component
.e-grid .e-icon-ascending::before {
content: '\e910';
padding-left: 5px;
color: #005A84;
}
.e-grid .e-icon-descending::before {
content: '\e916';
padding-left: 5px;
color: #005A84;
}
However, I would like to have a default icon against the column header to show that the columns are sortable.
Something like the following image
SIGN IN To post a reply.
1 Reply
Hi Aravind,
Greetings from Syncfusion support
From your update, we could see that you like to display the sorting icons in the initial render of Grid. Based on your query we have prepared a sample and achieved your requirement by adding custom class in the header by using headerCellInfo event of Grid.
In this sample, we have displayed the sorting icon in the header in the initial render, once you start performing the sorting the default Ascending/Descending icon will be displayed. When the column turns to initial state, we have displayed our customized sorting icon. Please refer the below code example and sample for reference.
|
<style>
.e-grid .customicon .e-sortfilterdiv:not(.e-icon-ascending):not(.e-icon-descending)::before {
content: "\e890"; //here you can display the icon as you want
font-size: .9em;
}
</style>
|
|
Index.js
export class Sorting extends SampleBase {
constructor() {
super(...arguments);
}
headerCellInfo(args) {
args.node.classList.add('customicon'); //add custom css
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={data} headerCellInfo={this.headerCellInfo.bind(this)} allowPaging={true} allowSorting={true} pageSettings={{ pageCount: 5 }}>
<ColumnsDirective>
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
</ColumnsDirective>
<Inject services={[Page, Sort]}/>
</GridComponent>
</div>
</div>);
}
} |
Screenshot:
Regards,
Rajapandi R
SIGN IN To post a reply.
