Tree View Fails to load when complex _id data types are present

[tnaum-ms]

When a dataset contains _id fields with more complex data types, the Tree View fails to render. This could be caused by:

• Erroneous _id extraction logic.
• Incorrect assumptions that _id is always of a specific type.

Task:

• Investigate the cause of the issue.
• Implement a fix to handle complex _id data types correctly.

Data in the Table View:

after switching to the Tree View:

[ghiscoding]

I was curious about this one, so I tried replicating this demo in Slickgrid-React with just what I see in the print screen above. The issue might be caused by the fact that the SlickGrid DataView requires unique "id" and I'm not sure if your Id in this case is _id? If it is then multiple entries as objects instead of strings might, most probably, cause the issue. In order to replicate a working demo, I added a formatter in the _id column to deal with the string or object data and the biggest change to get a working demo was to modify the data provided to the grid by using a map to provide truly unique Ids as string.

Note that my formatter below just display a stringified version when the _id is a complex object, but depending on your need, you could instead choose to return just the final Id string instead.

So here's the 2 modifications I've done

columnDefinitions = [
  {
        id: '_id', name: '_id', field: '_id', width: 220,
        filterable: true, sortable: true, exportWithFormatter: false,
        formatter: Formatters.multiple,
        params: {
          formatters: [
            // 1st formatter for ID
            ((_row, _cell, val) => {
              if (typeof val === 'object') {
                return JSON.stringify(val); // display stringified object
              }
              return val;
            }) as Formatter,
            // 2nd formatter for Tree Data icons
            Formatters.tree
          ]
        }
      },
      {
        id: 'type', name: 'type', field: '_id', minWidth: 90, filterable: true,
        formatter: (_row, _cell, val) => typeof val === 'string' ? 'ID' : '{}'
      },
];

and the use of map to add a unique Id as string

loadData() {
    const data = [
      { _id: '667591e', parentId: null },
      { _id: '67224b2', parentId: null },
      { _id: { mySpecialID: '223344' }, parentId: null },
      { _id: { mySpecialID: '424242' }, parentId: '667591e' },
    ];

    // make sure that the "id" is unique by using map
    const output = data.map((entry) => ({
      _id: entry._id,
      id: typeof entry._id === 'string' ? entry._id : entry._id['mySpecialID'],
      parentId: entry.parentId,
    }));

    console.log('data', output);
    return output;
  }

You can see a working Stackblitz of this change at this link (I modified the Slickgrid-React Example 27, so you'll need to route to that example to see it live)
https://stackblitz.com/edit/github-bnyowcpe?file=src%2Fexamples%2Fslickgrid%2FExample27.tsx