Sort Flex Grid Tree

Sort Flex Grid Tree

Posted by: murray-bryantboxcut-com-au on 14 September 2017, 2:20 am EST

• 

  murray-bryantboxcut-com-au

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:20 am EST

  I am using a wj-flex-grid with child-items-path and can’t get the sub branches to sort.

  how do you get all the sub-branches to sort in the tree?

  I have tried

  .sortDescriptions.push(new wijmo.collections.SortDescription(“name”, ‘true’));

  on the collection view but it makes no difference

• 

  murray-bryantboxcut-com-au

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:20 am EST

  Hi

  does anyone know if it is even possible to sort the items in the tree?

  regards

  Murray

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:20 am EST

  Hello,

  The behaviour which you are currently observing with sorting in the hierarchical display of FlexGrid is is the design behavior.

  Both sorting and filtering apply only to the CollectionView being used as a source. The collection view in this case only contains the top-level items. So you can sort or filter based only on those items, and on the data contained in those records.

  However, we are working on creating a sample that implements custom sorting to achieve the desired behaviour. We would need some time for the creating the sample. We will soon share our observations on the same.

  Thanks,
  
  Manpreet Kaur

• 

  murray-bryantboxcut-com-au

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:20 am EST

  Thanks for your reply

  Can you give me an idea of how you do custom sorting, or point me to some documentation so I can try and work it out

  As I am trying to use the tree now and as it is without sorting makes it pretty much useless once you have a good amount of data in it.

  And the users are complaining so I need to work something out quickly

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:20 am EST

  Hello Murray

  By default, sorting a grid containing hierarchical data only sorts the top-level items. This is because the CollectionView does not really know anything about the data hierarchy, since the childItemsPath property belongs to the grid and not to the underlying CollectionView.

  If you do want to sort some or all of the grid’s child items, you should handle the grid’s sortedColumn event to enumerate the items and perform the additional sorting on the child items yourself.

  The code snippet below shows one way of doing this:

  [js]// event handler for the sortedColumn event
  
  $scope.sortedColumn = function (s, e) {
  
  var view = s.collectionView;

  // sort child items
  if (view && s.childItemsPath) {
      for (var i = 0; i < view.items.length; i++) {
          sortItem(view.items[i], view, s.childItemsPath);
      }
  }
  

  }
  
  function sortItem(item, view, childItemsPath) {
  
  var children = item[childItemsPath];
  
  if (children && wijmo.isArray(children)) {

      // sort array
      children.sort(view._compareItems());
  
      // sort child arrays
      for (var i = 0; i < children.length; i++) {
          sortItem(children[i], view, childItemsPath);
      }
  }
  

  }[/js]

  I hope this helps. Please let me know if you need any additional details OK?

  PS: I have heard this question a couple of times, so I added this code to the FlexGridIntro sample where everyone can get it easily. That will be live in our next update.

• 

  murray-bryantboxcut-com-au

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:20 am EST

  Thanks Bernardo

  This approach will allow me to sort all of the items.

  But it is a bit clunky

  I have to

  1. Sort all of the items on load, which opens all the tree up. I will have to do it on load as the event is not really a workable solutions. As it only sorts after you click it.
  2. Collapse the whole tree
  3. Reopen the tree to the selected item

  Yes I can do the above and it will give me a working solutions for now.

  However I do feel this is a feature that should be added to the flex grid by default. It should be aware of the sortMemberPath on a column and if it is set should automatically sort the results when it writes the child items out. Can I suggest you add this as a feature

  thanks

  Murray

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:20 am EST

  Hello,

  Thank you for your feedback. We have posted an enhancement request for the same. It might be implemented in the future releases if the development team finds it to be feasible.

  You can request for this feature on our UserVoice page (https://wijmo.uservoice.com/]) so that other users can also vote for it and the same can be added on priority.

  Thanks,
  
  Manpreet Kaur

• 

  lcoimbatorer

  • Post Options:
  • Link
    Copy

  Posted 13 December 2019, 1:42 am EST

  Any updates on this? can we do the flexgrid.tree child items sort?

  And also please share if flexgrid.tree multi column sort possible or not!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 December 2019, 3:59 pm EST

  Hi Lavanya,

  Yes, you can use the above code to sort the child items in a hierarchical grid. Also, the same code will also work with MultiColumn sorting. Please refer to the sample link below for a demo:

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

  Regards,
  
  Ashwin