Display Multiple Datasource Hierarchically in a Tree Table

Hi,

I would like to display 2 datasource hierarchically in a tree table.

I have 2 Datasources. ChapterDs and NotesDs.

ChapterDs : Chapters can have Subchapters and so on. This can be easily displayed hierarchically using Parent as Hierarchical Property. Does not have any association with NoteDs.

NotesDs : Note has MANY to ONE association with ChapterDs. A chapter can have a Note. A subchapter can have multiple Notes and so on.

I would like display ChapterDs hierarchically with notes associated with each Chapter or Subchapter as shown in the PDF attached.

Your inputs will be helpful.

HierarchicalDs.pdf (20.3 KB)

Hi!

The only way to display two data sources in one tree is to use WidgetsTree.

First of all, we should add these two data sources to our screen:

<dsContext>
    <hierarchicalDatasource id="chaptersDs"
                            class="com.company.chnts.entity.Chapter"
                            view="chapter-view"
                            hierarchyProperty="parent">
        <query>
            select ch from chnts$Chapter ch order by ch.name
        </query>
    </hierarchicalDatasource>
    <collectionDatasource id="notesDs"
                          class="com.company.chnts.entity.Note"
                          view="note-view">
        <query>
            select nt from chnts$Note nt
        </query>
    </collectionDatasource>
</dsContext>

Then we should do some basic stuff and implement WidgetBuilder for the our WidgetsTree:

@Override
public void ready() {
    notesDs.refresh();

    WidgetsTree widgetsTree = componentsFactory.createComponent(WidgetsTree.class);
    add(widgetsTree);
    widgetsTree.setSizeFull();
    widgetsTree.setDatasource(chaptersDs);

    widgetsTree.setWidgetBuilder((datasource, itemId, leaf) -> {
        String chapterName = ((Chapter) datasource.getItem(itemId)).getName();

        List<Note> notes = findNotes(chapterName);

        Label chapterLabel = componentsFactory.createComponent(Label.class);
        chapterLabel.setValue(chapterName);

        if (notes.isEmpty()) {
            return chapterLabel;
        }

        VBoxLayout chapterRow = componentsFactory.createComponent(VBoxLayout.class);
        chapterRow.setSpacing(true);

        chapterRow.add(chapterLabel);
        chapterRow.add(createNotesBox(notes));

        return chapterRow;
    });
}

Obtaining, filtering and creating a container with Notes is trivial.

As a result and as a basic variant we have something like this:

chapters_and_notes

Best regards,
Daniil

Hi @tsarev,

I am facing similar problem related to this topic. I will be thankful if you can provide the whole project of your solution?

Thank you in advance!
Regards!

Hello @dop1010

Unfortunately I don’t have this sample anymore. Could you describe a problem you are faced with?

Regards,
Daniil.

Thank you, @tsarev!

I have already fixed the problem.

Glad to hear!

Regards,
Daniil.

Hello, can you provide me with the complete code?