Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
Disable Sort on Header Click
posted

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  

Parents Reply Children