TreeGrid not showing the child elements on expand in polymer 3 app

Flow
1

I have the following in the application template:

<vaadin-grid id="directory">
  <vaadin-grid-tree-column path="name" header="Name"></vaadin-grid-tree-column>
</vaadin-grid>

The iron-ajax calls the following on a successful response:

  getlist(request) {
    var myResponse = request.detail.response;
    console.log(myResponse);
    this.$.directory.items = myResponse;
  }

The variable myResponse that is returned is:

[
  {
    "name": "apps",
    "fullpath": "/db/system/xqdoc/apps",
    "children": [
      {
        "name": "xqDoc",
        "fullpath": "/db/system/xqdoc/apps/xqDoc",
        "children": [
          {
            "name": "modules",
            "fullpath": "/db/system/xqdoc/apps/xqDoc/modules",
            "children": [
              {
                "name": "config.xqm.xml",
                "fullpath": "/db/system/xqdoc/apps/xqDoc/modules/config.xqm.xml"
              },
              {
                "name": "xqdoc-lib.xqy.xml",
                "fullpath": "/db/system/xqdoc/apps/xqDoc/modules/xqdoc-lib.xqy.xml"
              }
            ]
          }
        ]
      }
    ]
  }
]

The apps shows up, but when I expand the apps node, then xqDoc node does not show up.

  • Do I need additional data in the dataset?
  • Am I missing some coding that is needed?
2

Hi Loren!

I recommend you to take a look to the[ TreeGrid demos pages in the component’s page]
(https://vaadin.com/components/vaadin-grid/html-examples/grid-tree-demos).

There you can find this note: Hierarchical data only works with a dataProvider. Using items will not work properly with a tree grid.

So basically you cannot do this for a TreeGrid: this.$.directory.items = myResponse;

Instead of that you should do something like (take a look to the demo to learn more about how to construct the dataprovider):

grid.dataProvider = function(params, callback) {
...

Regards.

3

I have an iron-ajax that gets the data. I can change it to add the path. e.g. ?path=apps/xqDoc

      <iron-ajax auto="true" 
        url="/exist/restxq/xqdoc/tree?path=[[tree.path]
]"  
        handle-as="json"
        on-response="getlist"></iron-ajax>

I do not understand your dataProvider. Do you have a better set of instructions?

4

You can find more information about the DataProvider in the [ html API documentation page]
(https://vaadin.com/components/vaadin-grid/html-api/elements/Vaadin.GridElement#lazy-loading-with-function-data-provider).

5

I have the solution.

<vaadin-grid id="directory" selected-items="{{selected}}">
    <vaadin-grid-tree-column path="name" header="Name"item-has-children-path="hasChildren"></vaadin-grid-tree-column>
</vaadin-grid>

I setup the provider using the connectedCallback and not to use an iron-ajax for talking with the server.

  connectedCallback() {
    super.connectedCallback();

    const grid = this.$.directory;

    this.$.directory.dataProvider = function(params, callback) {

      let url = "/exist/restxq/xqdoc/level" +
      '?page=' + params.page +         // the requested page index
      '&per_page=' + params.pageSize; // number of items on the page

      if (params.parentItem) {
        url += '&path=' + params.parentItem.fullpath;
      }

      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        callback(
          response.data, // requested page of items
          response.totalSize  // total number of items
        );
      };
      xhr.open('GET', url, true);
      xhr.send();
    };

    this.$.directory.addEventListener('active-item-changed', function(event) {
      const item = event.detail.value;

      if (item && item.hasChildren == false) {
        grid.selectedItems = [item]
;
      } else {
        grid.selectedItems = [];
      }
    });
  }

The web service returns a level of the tree:

{
    "totalSize": 2,
    "data": [
        {
            "name": "apps",
            "fullpath": "/apps",
            "hasChildren": true
        },
        {
            "name": "lib",
            "fullpath": "/lib",
            "hasChildren": true
        }
    ]
}

The codebase is here: [https://github.com/lcahlander/xqDoc-eXist-db]
(https://github.com/lcahlander/xqDoc-eXist-db)