How to catch sort event when a column header is clicked

Posted by: ralvee on 21 September 2017, 10:18 pm EST

  • Posted 21 September 2017, 10:18 pm EST

    Which event it (dataView) fires when when users click on the column header to sort by that column?

    Can't find anything here

    Also is it useful? How to use event:collectionChanged? any sample code?

  • Replied 22 September 2017, 7:22 am EST


    We have escalated your issue to the concerned team for further investigation as we couldn't find an event which fires when sorting is done in dataview.

    Tracking id for your issue is #246034.

    We will update you as soon as we hear anything from our concerned team.

  • Replied 24 September 2017, 11:43 pm EST


    We don't expose collectionChanged event on dataView currently and don't fire any event publicly on sort. Hence, could you please clarify what do you want to do as in what is your exact use case so that we can try to suggest you some workaround if possible.

  • Replied 25 September 2017, 9:55 pm EST

    I want to keep track of the sort done by the user so that when the user loads the same spread sheet again they get the sorted report
  • Marked as Answer

    Replied 26 September 2017, 3:06 am EST


    We don't expose such event directly, but if the thing is to keep the track of sorting then you can refer to the following code:-

    // first add event listener to click event
    document.getElementById('grid1').addEventListener('click', handleMouseClick);
    // do hit test, if it hit on column header and it's not on group toggle button or in header row and current column sortable, dataview will trigger sort internal
    function handleMouseClick(args) {
    var hitInfo = dataView.hitTest(args);
    var hitArea = hitInfo.area;
    var groupingInfo = hitInfo.groupingPanelInfo;
    var groupInfo = hitInfo.groupInfo;
    var hitColumnIndex = groupInfo ? groupInfo.column : hitInfo.column;
    if (hitArea === 'columnHeader') {
    if (hitInfo.columnGroupInfo && hitInfo.columnGroupInfo.onGroupExpandToggle) {
    // open or colose group
    } else if (hitInfo.headerInfo && hitInfo.headerInfo.inHeaderRow) {

    } else {
    var colObj = dataView.columns[hitColumnIndex];
    if (colObj && !!colObj.allowSorting) {
    // find the sort indicator to detect the sort status.
    var element = document.querySelector('.gc-column-header-cell.c' + hitColumnIndex + ' .gc-sorting');
    if (element && element.classList.contains('ascending')) {
    console.log('Sort column ' + colObj.caption + ' current is ascending ');
    } else if (element && element.classList.contains('descending')) {
    console.log('Sort column ' + colObj.caption + ' current is descending');
    } else {
    console.log('Sort column ' + colObj.caption + ' current is no sort');


    Hope it helps.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels