Tree Data and the "optional" initialSort property | expand / collapse icons to not render

[tnaum-ms]

I'm curious about your experience with Tree Data in SlickGrid. I'm fairly new to SlickGrid and started by following some of the examples provided, specifically Example 27. I also read the very helpful article on Tree Data here.

While exploring the initialSort property, I encountered an issue. Although it seems optional and is marked as such in the comments, omitting it causes the expand/collapse chevrons to not render (the classes expanded / collapsed aren't set).

I was able to reproduce this not only in my code but also in the Example 27 source code.

For reference, the relevant lines are:

        initialSort: {
          columnId: 'title',
          direction: 'ASC'
        },

Original Example 27	Example 27 with Lines Commented Out

[ghiscoding]

ah yeah I think that I always used the initialSort which is maybe why I never noticed this issue. I guess that what I could do in the lib is to assign the column that has the tree as the initial sort when undefined. I thought I had already done that in code but maybe I missed it

EDIT

So I checked the code and yes I already have that in place on these lines, so it should pick it up by itself as long as you have defined treeDataOptions.columnId which that one should be mandatory (I should revisit this one and really make it mandatory if I haven't already because you can't define a tree without saying which column has the tree)

const initialColumnSorting = treeDataOptions?.initialSort ?? { columnId: treeDataOptions?.columnId ?? '', direction: 'ASC' };

I'll take a look later why it doesn't work as I expect, I'll let you know if I find anything. I'll have to test in Slickgrid-Universal, the examples are the same and that's where the code lives.

[tnaum-ms]

Thank you for your quick response and for looking into this.

The behavior I observed can be seen in a modified Example 27, where the treeDataOptions.columnId property is already set.

Upon examining the generated HTML, I discovered that in the failing example, the collapsed or expanded classes aren't being applied. This should be handled by the treeFormatter, but it's not happening - suggesting that dataContext[hasChildrenPropName] isn't set. It's unclear why a missing initialSort setting could lead to such a side effect.

Relevant code snippet

I wasn't able to dig deeper as I would need to debug it further. However, I hope this input helps.

[ghiscoding]

thanks that is super useful, I forgot about the Tree Formatter that I created for this, one particularity of Formatters is that they are synchronous, so I have to see if the prop is correctly available at the time that the Formatter is being called.

Side note, it might have been better to open this Discussion under Slickgrid-Universal (because that's where the code really is) so that we can simply copy permalinks to code, we can only copy permalink on the same repo, it doesn't work when it's another repo. For example, here's a permalink in this repo, I love permalinks :)

slickgrid-react/src/slickgrid-react/components/slickgrid-react.tsx

Lines 209 to 212 in e82b52d

	// when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
	if (this.grid && this.gridOptions?.enableTreeData && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) {
	this._isDatasetHierarchicalInitialized = false;
	data = this.sortTreeDataset(newDataset, !isDatasetEqual); // if dataset changed, then force a refresh anyway

versus a permalink from Slickgrid-Universal (because it's an external repo, it will only show the link but not the actual code)

https://github.com/ghiscoding/slickgrid-universal/blob/a1977a84adf58d9e3f00cecaf1c964f427f9590c/packages/common/src/formatters/treeFormatter.ts#L29-L34

[ghiscoding]

should be fixed in v5.5.1, cheers ⭐

[tnaum-ms]

Thank you! 👍