Question

I am trying to create editable tree widget. There are many samples how to make editable columns for Table, for example by using cellrenderer and propertyCellRendererFactoryFunc - which is quite awesome. Unfortunately I can't find any useful example for VirtualTree/Tree. Is it even possible to create one without deep Tree source code editing?

Was it helpful?

Solution

Here is one approach for VirtualTree:

  • VirtualTree uses normal widgets for the tree items, so the idea is to taylor the way these items are created, in order to modify their appearance.
  • This is achieved through a delegate. Use tree.setDelegate() to set a custom delegate on a tree.
  • The delegate itself can be a native JS object (map). It has to conform to the IVirtualTreeDelegate interface, meaning the delegate object exposes some methods from a predefined set (like 'bindItem', 'createItem', ...). See the code of this demo for a general example.
  • In your case, you want to provide a createItem method in your delegate, along with any other supporting methods (e.g. bindItem). There is a somewhat more complicated example that does that, which uses an instance of itself as the delegate.

HTH

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top