Hey Guys, 

I was wondering is there was a way to disable the default sort on header click on ig-grid. Here is a sample of my my code.

this.FullDataGridOptions = {
width: "100%",
autoGenerateColumns: false,
dataSourceType: "json",
responseDataKey: "OrderStatus['result']",
dataSource: url,
requestError: (evt, ui) => { },
headerRendered: (evt, ui) => { },
dataRendered: (evt, ui) => { },
rowsRendered: (evt, ui) => { },
features: [
{
name: "Paging",
type: "remote",
pageSize: 100,
recordCountKey: "Totalcount",
pageSizeDropDownLocation: "inpager",
pageIndexChanged: function (evt, ui) { }
},
{
name: "Filtering",
type: "remote",
mode: 'simple',
allowFiltering: true,
caseSensitive: false,
renderFC: false
},
{
name: "Sorting",
type: "remote",
mode: "multi",
sortUrlKey: 'sort',
sortUrlKeyAscValue: 'asc',
sortUrlKeyDescValue: 'desc',
columnSorted: (evt, ui) => {
this.sort(ui['expressions'][0]['fieldName'], ui['expressions'][0]['dir']);
},
columnSettings: [
{ columnKey: 'assignedToName', allowSorting: false },
{ columnKey: 'pO_ProductId1', allowSorting: false },
{ columnKey: 'pO_ProductId2', allowSorting: false },
{ columnKey: 'pO_Description', allowSorting: false },
{ columnKey: 'rS_Quantity', allowSorting: false },
{ columnKey: 'rS_EstimatedDeliveryDate', allowSorting: false }
]
},
],
columns: [
{ headerText: "Purchase <i id='sortPO' class='fa fa-sort' aria-hidden='true'></i>&nbsp;<i class='fa fa-refresh' aria-hidden='true' onclick='angularComponentRef.unsort(1)'></i>", key: "purchaseOrder", dataType: "string", width: 130 },
{ headerText: "Sales Rep", key: "assignedToName", dataType: "string", width: 120 },
{ key: "category", dataType: "string", hidden: true },
{ headerText: "Vendor Part #", key: "pO_ProductId1", dataType: "string", width: 120 },
{ headerText: "Mfg. Part #", key: "pO_ProductId2", dataType: "string", width: 140 },
{ headerText: "Product Description", key: "pO_Description", dataType: "string", width: 320 },
{ headerText: "Created Date <i id='sortCD' class='fa fa-sort' aria-hidden='true' onclick='angularComponentRef.sort(2)'></i>&nbsp;<i class='fa fa-refresh' aria-hidden='true' onclick='angularComponentRef.unsort(2)'></i>", key: "createdDateString", dataType: "date", format: "MMMM dd, yyyy hh:mm tt", dateDisplayType: "local", width: 170 },
{ headerText: "Quantity", key: "rS_Quantity", dataType: "string", width: 50 },
{ headerText: "Estim", key: "rS_EstimatedDeliveryDate", dataType: "date", width: 90 }
],
}
}

I have added to <i> tags to the header text to show Glyphicons and added actions to them.

I want to disable the default on header click and trigger the sorting feature manually on click of the glyphicon. Still using the header provided by Ig-grid