Sorting arrows not visible.

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

  • 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?
  • Replied 1 April 2020, 3:37 pm 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:



    Regards,
    Ashwin
  • Replied 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
  • Replied 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
  • Replied 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?
  • Replied 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
  • Replied 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
  • Replied 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
Need extra support?

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

Learn More

Forum Channels