Tree View Only Expanding for First Node

DaveArch

JET Version: 10.0

Hi Community

We are using oj-tree-view with a CollectionTreeDataSource as described in the Cookbook here.

We have a simple 2-level hierarchy and the data for each level is fetched via a call to a web service.

Everything is working as expected. When the tree loads, we see the parent nodes and on expanding a node, the web service is called for its children and the component shows the child nodes.

The problem we are experiencing is that once a parent has been expanded, no other parent nodes can be expanded. The expand icon is enabled but clicking it does nothing. No error is shown in the developer console, the child web service is not called and no call is made to either the callback ‘childCollectionCallback’ or the callback ‘parseMetadata’. No indication is given as to what is wrong. 

The parent node that is expanded continues to operate normally and can be collapsed and expanded however no other parent node can be expanded.

We have checked that all of the nodes have a unique value for the id attribute.

Here is a simplified version of the view-model code we are using:

 
    this.parseMetadata = (model) => {

        let row = model.attributes;
  
        let parsed = null;
  
        if (row.treeNodeType == 'PARENT') { // test for row property indicating parent
  
          parsed = {
            leaf: false,
            key: model.id,
            depth: 1
          }
  
        } else if (row.treeNodeType == 'CHILD') { // test for row property indicating child
  
          parsed = {
            leaf: true,
            key: model.id,
            depth: 2
          }
  
        }
  
        return parsed;
  
      };
      
      this.getChildCollection = (rootCollection, model) => {
  
          let svcURL = null;
  
          if (!model) {
  
            svcURL = "https://someurl/service"; // returns parent node JSON
  
            var treeCollection = new Model.Collection(null, {
              url: svcURL,
              model: self.parentModel
            });
  
          } else {
  
            svcURL = "https://someotherurl/service"; // returns child node JSON
  
            var treeCollection = new Model.Collection(null, {
              url: svcURL,
              model: self.childModel
            });
  
          }
  
          return treeCollection;
  
      };
      
      this.dataSource = new CollectionTreeDataSource({
          root: this.getChildCollection(null, null),
          parseMetadata: this.parseMetadata,
          childCollectionCallback: this.getChildCollection
      });
               

Result:

Click Parent 1 expand icon, child web service called and children are shown. Click Parent 2 expand icon, no response (no errors, no web service call, no call to callbacks):

Any help appreciated.

User_9F4V1

Hey @DaveArch, This is a know issue with the CollectionTreeDataSource and unfortunately that is deprecated so most likely this won't be fixed. If what you're trying to do is fetch children on expand I have a workaround you may be able to use using an ArrayTreeDataProivder.

JET9 <= JET VERSION

1. Using an ArrayTreeDataProvider
2. The nodes that your unsure if or know have children set to an empty array
3. The nodes your sure don't have children omit the children field
4. Listen onExpandChanged shown here when a node is expanded fetch the children for that node from the server
5. Once the children are fetched mutate them in to the data set shown here

DaveArch

Further information which may help diagnose what is happening:

If we programmatically expand the parent nodes using the technique shown in the Expanded demo where addAll() is called on the observable containing the Knockout Key Set, all of the parent nodes expand as expected and then become fully functional in that any parent can be expanded and collapsed by the user.

Therefore it is just the user action of expanding a parent node when another parent is already expanded which is not working.

User_9F4V1

Hey @DaveArch, This is a know issue with the CollectionTreeDataSource and unfortunately that is deprecated so most likely this won't be fixed. If what you're trying to do is fetch children on expand I have a workaround you may be able to use using an ArrayTreeDataProivder.

JET9 <= JET VERSION

1. Using an ArrayTreeDataProvider
2. The nodes that your unsure if or know have children set to an empty array
3. The nodes your sure don't have children omit the children field
4. Listen onExpandChanged shown here when a node is expanded fetch the children for that node from the server
5. Once the children are fetched mutate them in to the data set shown here

DaveArch

Hi @User_9F4V1

Thanks for taking time to reply.

We re-engineered the solution to use the approach you suggested and that has worked. It also gives us a bit more control around CRUD operations over the Collection-based approach.

I do think it's useful to have a pattern based on Collections though so it would be a useful addition in the future.

Thanks again.