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> <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> <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
Hello Singu,
All you say is correct,but that should not affect my solution.
I'm attaching my sample for your reference.
Best regards, Martin Pavlov Infragistics, Inc.igGridSorting.zip
Hey Martin,This solution did not work for me. Can you give me a small example?On applying sort, based on the direction a class is added to TH ''ui-iggrid-colheaderasc" or "ui-iggrid-colheaderdesc" based on the sorting direction.
<th id="FullGridId_purchaseOrder" role="columnheader" aria-label="Purchase <i id='sortPO' class='fa fa-sort' aria-hidden='true' style='z-index: 999;' onclick='angularComponentRef.sort(1)'></i>&nbsp;<i class='fa fa-refresh' aria-hidden='true' onclick='angularComponentRef.unsort(1)'></i>" tabindex="0" class="ui-iggrid-header ui-widget-header ui-iggrid-colheaderasc" style="background-color: rgb(99, 205, 153);" title="Sorted ascending" aria-sort="ascending" data-localeid="sortedColumnTooltip" data-localeattr="title"><span class="ui-iggrid-headertext" style="color: rgb(254, 254, 254);">Purchase <i id="sortPO" class="fa fa-sort-alpha-asc" aria-hidden="true" style="z-index: 999;" onclick="angularComponentRef.sort(1)"></i> <i class="fa fa-refresh" aria-hidden="true" onclick="angularComponentRef.unsort(1)"></i></span> <div class="ui-iggrid-indicatorcontainer"><span class="ui-iggrid-colindicator ui-iggrid-colindicator-asc ui-icon-arrowthick-1-n ui-icon"></span> </div> </th>
This class in turn adds a div with class "ui-iggrid-indicatorcontainer". So removing the class above and the Div seemed to get the expected behaviour.
<div class="ui-iggrid-indicatorcontainer"><span class="ui-iggrid-colindicator ui-iggrid-colindicator-asc ui-icon-arrowthick-1-n ui-icon"></span> </div>
You can do that by overriding the CSS that gets applied when the column is sorted:
Here is the CSS:
<style> .ui-iggrid th.ui-state-active, .ui-iggrid th.ui-state-focus, .ui-iggrid-sortableheader:focus { background: #888; /* change to match your grid header background color*/ } </style>
You need to change "#888" to match your header color. Also this CSS will be applied to all the igGrids on the page. If you want it to affect particular grid you need to prefix it with the grid #id.
Best regards, Martin Pavlov Infragistics, Inc.
Hey Martin, The solution you gave me is working great, but I have another issue now.
On sorting the 'sort Column' CSS is applied which I love, this unfortunately also implements the CSS to the header.
I would like to keep the column CSS (BLUE) but not enable any CSS to the column header. How can I achieve this?
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
]
}