Treetable backend structure

Hilla
1

hi all, me again :smiley:

I’m trying to use a treegrid as described in the doc here but I can’t find information about required parameters and the backend structure.

In the first example the doc says this:

// full length of the corresponding
 // hierarchy level is requested from the data service
callback(people, hierarchyLevelSize);

now I don’t understand what this hierarchyLevel is. Is the max depth of the tree? or just the current level (since I have to pass the parent)? Does it start from zero or one?

There is also this attribute that I can’t find info about: itemHasChildrenPath=“manager”
Why do I need this?

Currently I have the following, which does not work:

@BrowserCallable
@AnonymousAllowed
public class CIController extends CrudRepositoryService<CIFolder, Long, CIRepository> {

    public record CIFolderTreeDTO(@NonNull List<? extends @NonNull CIFolder> values, int level) {
    }

    public @NonNull CIFolderTreeDTO findChildren(Long parentId) {
        var t = getRepository().findAllByParentId(parentId);

        int hierarchyLevel = 1;
        if (!t.isEmpty()) {
            CIFolder parent = t.getFirst().getParent();
            while (parent != null) {
                parent = t.getFirst().getParent();
                hierarchyLevel++;
            }
        }

        return new CIFolderTreeDTO(t, hierarchyLevel);
    }
}



async function dataProvider(
    params: GridDataProviderParams<CIFolder>,
    callback: GridDataProviderCallback<CIFolder>
) {
    // The requested page and the full length of the corresponding
    // hierarchy level is requested from the data service
    const {values, level} = await CIController.findChildren(params?.parentItem?.id);

    callback(values, level);
}


export default function MainView() {

    return (
        <Grid itemHasChildrenPath="hasChildren" itemIdPath="id" dataProvider={dataProvider}>
            <GridTreeColumn path="seriesName"/>
            <GridColumn path="name"/>
            <GridColumn path="absName"/>
            <GridColumn path="description"/>
        </Grid>
    );
};

copilot also give some random error that disappear as soon as I try to click on it:
image

thank you again for your help!

2

hierarchyLevelSize is the number of children. This is used for lazy loading - you’re not supposed to return all children but only a slice based on params.page and params.pageSize. But you should also provide the total number of children so that the scrollbar size can be computed correctly and so that the component can know if more children need to be fetched when the user scrolls down.

3

thank you! this worked!

4

another question, I’ve tried adding the following as described in the grid component to enable row selection. It works but I have an annoying refresh of the entire component everytime I click on something.

<Grid itemHasChildrenPath="hasChildren" selectedItems={selectedItems.value}
                          onActiveItemChanged={(e) => {
                              const item = e.detail.value;
                              selectedItems.value = item ? [item] : [];
                          }}
                          itemIdPath="id" dataProvider={dataProviderOpe}>
                        <GridTreeColumn path="name"/>
                        <GridColumn path="absName"/>
                        <GridColumn path="description"/>
                    </Grid>

Am I doing something wrong?

5

It’s possible that a new data provider is being created on every render. Please make sure it’s either defined outside the render function or wrapped with useCallback. If that doesn’t work, it would be helpful to see the full code snippet.