Forums Home / Wijmo / General Discussion
Posted by: sskss1ss2 on 10 January 2022, 11:11 pm EST
sskss1ss2
Posted 10 January 2022, 11:11 pm EST
My use case is that, i need to display the sort icon only on clicking the column type row header. Currently i am seeing the “showRowFieldSort” property available but it displays the icon for all the row headers. Rather i need it to appear only on the clicked row header.
Kindly suggest a way to do this?
sonu.pandey
Posted 11 January 2022, 10:33 pm EST
Hello,
The behavior is by design. rowField columns are a little different from regular columns in that they are always sorted, either in ascending or descending order. This is different from regular columns, which are unsorted by default.
If you do not want the sort icons to appear initially then you could handle the sortedColumn event and set the property to true if the column that was sorted is not a data column.
This way, sorting on any data columns would cause the grid to show the sort icons on the data column that was sorted; sorting on the row field would show the sort over the row field only. Please refer to the code snippet below:
pivotGrid.sortedColumn.addHandler(function (s, e) {
// option 1:
// show row field sort icons when the user sorts on the row fields
// in this case, removing a data sort will *NOT* show the row field sort icons
s.showRowFieldSort = (e.panel == s.topLeftCells);
// option 2
// show row field sort icons when the data is unsorted
// in this case, removing a data sort *WILL* show the row field sort icons
// s.showRowFieldSort = s.collectionView.sortDescriptions.length == 0;
})
As you can see, there are two possible ways to handle this. The first removes the row field icons whenever the user changes the data sorts (even when they use ctrl+click to remove the data sorts). The second removes the row field icons only when the data is sorted. You can adopt any of the 2 which best suits your requirement.
Regards
sskss1ss2
Posted 11 January 2022, 11:32 pm EST
Hello,
Thanks for the reply.
The above snippet would make the sort icon to appear on all headers, rather i need it to appear only on the clicked row header. Is there a way to do that?
Currently am doing it the below way:
setSort(e) {
if(e.target.classList.contains(‘wj-row-field-hdr’)) {
e.target.classList.add(‘wj-glyph-up’);
e.target.insertAdjacentHTML(‘beforeend’, ‘’);
}
}
But with the above line, the sort icon appears and disappears quickly because when the data arrives from the service after sorting and the grid is refreshed and henceforth the icon disappears even though it is sorted.
Regards
sonu.pandey
Posted 12 January 2022, 10:37 pm EST
Hello,
I have prepared a sample using the approach you have shared in the above response. It seems that the issue of disappearing was occurred as per your description. However, the issue can be resolved by adding some delay. Please refer to the code snippet and sample link below demonstrating the same:
pivotGrid.hostElement.addEventListener('click', (e) => {
let hti = pivotGrid.hitTest(e);
if (hti.cellType == 4) {
let field = ng.fields[hti.col];
setSort(e, field);
}
});
function setSort(e, field) {
if (e.target.classList.contains('wj-row-field-hdr')) {
setTimeout(() => {
if (field.descending === true) {
e.target.insertAdjacentHTML(
'beforeend',
'<span class="wj-glyph-down"></span>'
);
} else if (field.descending === false) {
e.target.insertAdjacentHTML(
'beforeend',
'<span class="wj-glyph-up"></span>'
);
}
}, 50);
}
}
Sample link: https://stackblitz.com/edit/js-u1srvb?file=index.js
I hope this works for you.
Regards
