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
  • 23953
    Verified Answer
    Offline posted

    Hello Singu,

     

    I saw that you disable the sorting of all the columns except: "purchaseOrder" and "createdDateString".

    In order to disable the default sort action and handle it manually you should also disable sorting for them like this:

    {

    name: "Sorting",

    columnSettings: [

    { columnKey: 'purchaseOrder', allowSorting: false },

    { columnKey: 'createdDateString', allowSorting: false },

    //…. Other columns configuration here

    ]

    }

     

    Best regards,
    Martin Pavlov
    Infragistics, Inc.

Reply Children