Sorting arrows not visible

Sorting arrows not visible

Posted by: michael.lucks on 31 March 2020, 4:20 pm EST

• 

  michael.lucks

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 March 2020, 4:20 pm EST

  This following example was produced by GrapeCity Support based on a problem I reported (Case #426728) in a recent version of Wijmo. My agent forwarded it to the Wijmo development team, but perhaps I can get a quick answer on the Forum.

  The flexSheet has showSort and allowSorting turned on – but when you click in the column header, but the sorting arrow does not appear as expected. And you cannot sort the sheet.

  http://jsfiddle.net/JParksGC/63hnytkr/

  Similar code has been working for me in an earlier version of Wijmo from 2018.

  What’s wrong?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 April 2020, 3:37 pm EST - Updated 3 October 2022, 3:38 am EST

  Hi Michael,

  The sort icons will not be shown in the empty sheet because there is not data to sort so the sorting will not happen.
  
  But, in the example, if you will navigate to the ‘New Sheet’ and then sort the FlexSheet, then the sort icons will be shown correctly.

  Refer to the screenshot below:

  

  1600×821 75.1 KB

  Regards,
  
  Ashwin

• 

  michael.lucks

  • Post Options:
  • Link
    Copy

  Posted 1 April 2020, 3:49 pm EST

  Ashwin,

  On the New sheet, the sort icons will only appear if you first open the filter and then click the Ascending or Descending button. Shouldn’t the icon appear automatically since flexSheet.showSort = true?

  Also if you add data to the Empty sheet, the icons do not appear at all, even if you first click in the Filter.

  Please correct me if I’m mistaken.

  Thanks,
  
  Mike

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 April 2020, 8:32 pm EST

  Hi Mike,

  The showSort property is used to display the current sort indicators on the header of the FlexSheet (up arrow for ascending sort and down arrow for descending sort). This icon is not displayed until the data is actually sorted by FlexSheet. That is why, when you click on the sorting buttons in the filter panel, then only the icon is shown.

  Also, the sorting is only done in bound mode of the FlexSheet. Bound mode means that you have assigned an itemsSource of the FlexSheet or the Sheet instance like you have did in the example with the NewSheet.

  In the empty sheet, the FlexSheet is not bound to any data. So there is no data that needs to be sorted. Since sorting does not occur in the empty sheet, sort icons are not shown.

  I hope this clears your doubts.

  ~regards

• 

  michael.lucks

  • Post Options:
  • Link
    Copy

  Posted 2 April 2020, 2:03 am EST

  It didn’t used to work that way. Since 2018, we have been running an application in Wijmo version 5.20182.524 in which the sorting arrow appears as soon as you click in the column header – i.e. you don’t have first click in the filter and then click again on a sort button. That behavior seems more user-friendly – why is it no longer supported?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 April 2020, 4:06 pm EST

  Hi Mike,

  Since FlexSheet is based on Excel, and sorting in excel is also done in the same way. So, this behavior is by design.

  ~regards

• 

  michael.lucks

  • Post Options:
  • Link
    Copy

  Posted 6 April 2020, 1:54 pm EST

  Ashwin,

  Here is Wijmo sorting demo:

  https://www.grapecity.com/wijmo/demos/Grid/Sorting/Overview#

  Note that the sorting arrow appears as soon as you click anywhere in the column header. The filter icon is not even displayed.

  Why is this no longer supported?

  Thanks,
  
  Mike

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 April 2020, 5:39 pm EST

  Hi Mike,

  There was an issue in FlexSheet regarding the cell selection after clicking on the header. To avoid this issue, we removed the sorting by clicking on the headers.

  But, if you wish, you can implement the sorting behavior by handling the mousedown event on the columnHeaders of the FlexSheet:

  flexSheet.hostElement.addEventListener('mousedown', function(e) {
    var hti = flexSheet.hitTest(e);
    if(hti.panel === flexSheet.columnHeaders) {
      e.preventDefault();
      var binding = flexSheet.columns[hti.col].binding;
      const view = flexSheet.collectionView;
      var asc = flexSheet.columns[hti.col].currentSort === '+' ? false : true;
      view.sortDescriptions.clear();
      if(e.ctrlKey) {
        return;
      }
      view.sortDescriptions.push(new wjcCore.SortDescription(binding, asc));
    }
  })
  

  You may refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-1ned3x

  ~regards

• 

  michael.lucks

  • Post Options:
  • Link
    Copy

  Posted 29 August 2021, 3:56 pm EST

  Thanks for your suggestion about the mousedown event – sorry for the long delay in replying.

  I finally got around to trying it out in Wijmo version 5.20212.812. The grids can now be sorted by clicking on the column headers, but the sort does not seem to work correctly in columns that contain formulas. Here is an example:

  https://jsfiddle.net/lucksm1/tva9uz23/48/

  Each cell in column B is a formula that simply copies Column A – but when you sort the grid (on either column), Column B is unchanged.

  Column B gets sorted correctly in our earlier version of Wijmo ( 5.20182.524).

  We would like to retain the ability to sort by clicking on the column header. Is there a way to address this new problem?

  Thanks,
  
  Mike

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2021, 9:48 pm EST

  Hello Mike,

  How have you been?

  In the later versions, there is a better way to sort the sheet instead of using SortDescriptions. Instead of this, we can use the SortManager class which provides a better sorting API for FlexSheet.

  https://stackblitz.com/edit/js-pfalvy

  ~regards

• 

  michael.lucks

  • Post Options:
  • Link
    Copy

  Posted 31 August 2021, 5:36 pm EST

  Thanks so much, Ashwin – that gets the sort working correctly!

  But there is one more issue. If I click anywhere in a header cell the sort executes – but I would like to make an exception for the filter tool.

  When I click on the filter icon, I would like the filter tool to open. Is there an easy way to do that in Wijmo or should I try to implement it somehow via jQuery?

  Thanks,
  
  Mike

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2021, 5:45 pm EST

  Hi Mike,

  In the mousedown event handler, check if the current target is a filter icon or not. Then only perform sort. I have updated the sample:

  https://stackblitz.com/edit/js-pfalvy

• 

  michael.lucks

  • Post Options:
  • Link
    Copy

  Posted 31 August 2021, 7:02 pm EST

  Ah, I forgot about the hasClass function. It worked – thanks again!

  But yet another problem – the sort (either by clicking the header or using the filter tool) does not seem to trigger the Sorted Column event. Does the SortManager trigger some other event?

• 

  michael.lucks

  • Post Options:
  • Link
    Copy

  Posted 1 September 2021, 5:27 am EST

  I can work around the event problem described in my last post.

  One thing I forgot to mention – when checking for the filter icon, you need to check for the class ‘.wj-glyph-filter’ in addition to ‘.wj-elem-filter’.

  Thanks again for getting this resolved, Ashwin – much appreciated!