Display Multiple Datasource Hierarchically in a Tree Table

Support
#1

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)

#3

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

#5

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!

#6

Hello @dop1010

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

Regards,
Daniil.

#7

Thank you, @tsarev!

I have already fixed the problem.

#8

Glad to hear!

Regards,
Daniil.

#9

Hello, can you provide me with the complete code?