[Internet Explorer] After clear sort the sorting indicator remains active

Tags: #<Tag:0x00007efc6533e448>
#1

Hello,

It’s been awesome working with Handsontable!

I am using handsontable v7.3.0 with ColumnSorting feature.
When the column header is clicked twice i.e. ascending and then descending, after clearing sort on table, the sort indicator in header remains active specifically in IE 11. Clear sort works fine on chrome.

The application in which handsontable is used supports mainly IE. :frowning:

Also when sort is applied on different columns the previous column header’s(on which sort was applied with double clicking) sort indicator(arrow) remains active throughout.

Can I get help here please?

        var hotConfig = {
    data : data,
    columnSorting : true,
    ...
    }

       function clearSort(hotInstance) {
    var sortingPlugin = hotInstance.getPlugin('columnSorting');
    		sortingPlugin.clearSort();
    }

image
image.png1612×45 2.54 KB

#2

Hi @manjushamule7

We’re planning to deprecate support for Internet Explorer - https://github.com/handsontable/handsontable/issues/7026

Microsoft itself introduced Edge and want to add a Chromium engine to the browser so we (as IE has been a huge obstacle) also want to remove IE from the Supported Browser list.

What does it mean? We are planning to keep all IE-related workarounds for a while, but we won’t fix issues that are replicable only on the Internet Explorer.

Were you aby to replicate the same issue on other browsers as well or it happens only on IE?

#3

Thanks @aleksandra_budnik for your reply.

The issue happens only with IE. I think cause for the issue is sort indicator (descending) doesn’t get cleared out. Either after clearing sort plugin or clicking header.

  1. Click header to sort in ascending order.
  2. Click again to sort in descending order.
  3. Clicks same header to clear current column sorting
    The rows in table behaves normally while sorting but the indicator remains active throughout.

It would be helpful if you could provide any workaround for this.

Thanks!

#4

I am sorry nut we will not provide any new fixes/workaround for IE-issues.

#5

Thanks @aleksandra_budnik for all your support!

So after lots of trials I was able to run it normally on IE. Listing out my analysis and findings below so that it would help someone who’s facing same issue.

  • See the sort mechanism on IE/Safari for https://handsontable.com/docs/7.4.2/demo-sorting.html especially after applying descending sort on any column

  • This can be fix by applying afterColumnSort hook and appending custom header class by using afterGetColHeader.

    afterGetColHeader: function (col, TH) { ... $(TH.firstChild).addClass("header_"+col); }

    hot.addHook('afterColumnSort', function(prevColumn, currentColumn){ hotTableConfig.afterColumnSort(prevColumn, currentColumn, 'header_'); });

    In the afterColumnSort callback toggle(add/remove) the sort classes ascending and descending for previous and current column.
    But this implementation breaks if the table renders frequently. (after clear sort, filter, changes height etc)

  • Another simple alternative that worked seamlessly for me is using nestedHeader table structure. I used it since it was working fine in IE.
    nestedHeaders: [["Brand", "Model", "Code name", "Country of origin"]],

TADA! :metal:

#6

That’s an impressing work you’ve done @manjushamule7!
I’m relieved to know that you’ve found a way to get this working.
Thank you so much for sharing the investigation results.

#7