How can I display a tree structure in SpreadJS

How can I display a tree structure in SpreadJS

Posted by: rgaurava on 8 September 2017, 9:51 am EST

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  I want to show a tree with details in spreadJS as in the attached screenshot. How do I do that ?

  thanks,
  
  Rohit

• 

  reeva

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  Hello,

  As of now hierarchical view is not supported in SpreadJS and enhancement for the same has already been posted.

  We will surely update you once this will be incorporatted.

  Thanks,
  
  Reeva

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  is there any way i can do this in Wijmo5 ?

• 

  c1_ericp

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  is this OK for your case? http://jsfiddle.net/Wdd72/

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  Hi Eric,

  this is perfect!! will play around with this

  Thanks,
  
  Rohit

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  hi Eric,

  Will it be possible to do this. Basically the idea is to have two SpreadJS in two panels and then draw lines between rows. When you draw the lines it should throw and event indicating the source and target rows. same when you click on the lines. I am simply looking for the UI component and not any backend data structure.

  thanks,
  
  Rohit

• 

  c1_ericp

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  I think that’s possible, spreadjs has povides all necessary information, like first row index, row height, topRowChanged event, those are enough to calculate position of row, and show lines between two spreadjs. And I don’t think there is out of box UI control for this specific requirement, you have to make by yourself, and if you need some mouse interaction on those lines, maybe svg is a better choice than canvas.

  Hope it helps

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  Thanks! this helps

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  Hi Eric,

  Regarding your example of http://jsfiddle.net/Wdd72/ how do I export and import the Json and still maintain the Tree/hierarchical structure ? I want to give our customer an ability to save and retrieve their work

  Thanks,
  
  Rohit

• 

  c1_ericp

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  because the tree UI is implemented by using customized celltype, it won’t be serialize into json data, but data structure(group) is in, so after load json back, you need to set the treeNodeCellType to the first column by using code, then spreadjs will show tree structure.

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  How do I capture the event when a certain rowRangeGroup is expanded or collapsed ? I need to update certain components based on the expansion or collapse.

  thanks,
  
  Rohit

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  Guys,

  Any update ?

• 

  rgaurava

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  Guys, this is not working. Can someone respond ?

• 

  reeva

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  Hello,

  We have escalated your issue to the concerned team and we will get back to you once we hear anything from them.

  We regret for the delay.

  Thanks,
  
  Reeva

• 

  c1_ericp

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:51 am EST

  There are RangeGroupStateChanging and RangeGroupStateChanged events for group state change:
  
  http://helpcentral.componentone.com/NetHelp/SpreadHClientUG/webframe.html#Spread~$.wijmo.wijspread.Events~RangeGroupStateChanging_EV.html
  
  http://helpcentral.componentone.com/NetHelp/SpreadHClientUG/webframe.html#Spread~$.wijmo.wijspread.Events~RangeGroupStateChanged_EV.html
  
  Those are for your case.
  
  l

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy

  Posted 24 July 2019, 4:36 am EST

  Hi,

  Is the tree structure available in spread js now?

  Regards
  
  Pooja Bansal