Update column based on row selection

Support
#1

I have two tables (“Annotation”, “Alias”) and I am using split screen for both the tables on a single browser screen.
Both tables are related by many_to_one cardinality with annotation_id.

What I would like to do now is when I select the row on the upper half means annotation table I should see the data related to it on the second half from the alias table which have the same id.
Ex- when I select row 1 in annotation table, it should refer to the selected id and display all the related data in the alias table which refers to the same id.
I could do it with query but I want in such a way that it should update on row selection(single selection).

Please refer to the attached screenshot below.

Any suggestions will be appreciated.

Thanks,
Sanchit

browse-file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="msg://browseCaption"
        class="com.company.myproject.web.annotation.AnnotationBrowse"
        focusComponent="AnnotationFieldDataGrid"
        messagesPack="com.company.myproject.web.annotation">
    <dsContext>
        <collectionDatasource id="annotationsDs"
                              class="com.company.myproject.entity.Annotation"
                              view="_local">
            <query>
                <![CDATA[select e from myproject$Annotation e]]>
                <filter>
                    <and>
                        <c>e.adSpace = :component$adSpaceSearch</c>
                        <c>e.type = :component$typeSearch</c>
                        <c>e.code = :component$codeSearch</c>
                    </and>
                </filter>
            </query>
        </collectionDatasource>
        <collectionDatasource id="annotationTypeDs"
                              class="com.company.myproject.entity.Annotation"
                              view="annotation-typeview">
            <query>
                <![CDATA[select e from myproject$Annotation e]]>
            </query>
        </collectionDatasource>
        <collectionDatasource id="aliasesDs"
                              class="com.company.myproject.entity.Alias"
                              view="alias-view">
            <query>
                <![CDATA[select e from myproject$Alias e]]>
            </query>
        </collectionDatasource>
    </dsContext>
    <dialogMode height="600"
                width="800"/>
    <layout expand="split">
        <groupBox id="groupBox"
                  orientation="horizontal"
                  spacing="true">
            <lookupField id="adSpaceSearch"
                         caption="AdSpace Search"
                         captionProperty="adSpace"
                         inputPrompt="Select AdSpace"/>
            <lookupField id="typeSearch"
                         caption="Type Search"
                         captionProperty="type"
                         inputPrompt="Select type"/>
            <lookupField id="codeSearch"
                         caption="Code Search"
                         captionProperty="code"
                         inputPrompt="Select code"/>
        </groupBox>
        <split id="split"
               orientation="vertical"
               width="100%">
            <dataGrid id="AnnotationFieldDataGrid"
                      datasource="annotationsDs"
                      editorEnabled="true"
                      height="100%"
                      reorderingAllowed="false"
                      width="100%">
                <columns>
                    <column property="adSpace"/>
                    <column property="type"/>
                    <column property="code"/>
                    <column property="isBestselling"/>
                    <column property="created"/>
                    <column property="enabled"/>
                    <column property="updated"/>
                    <column property="id"/>
                </columns>
                <rowsCount/>
            </dataGrid>
            <dataGrid id="aliasdataGrid"
                      datasource="aliasesDs"
                      height="100%"
                      width="100%">
                <columns>
                    <column property="annotation"/>
                    <column property="value"/>
                    <column property="label"/>
                    <column property="lang"/>
                    <column property="ambiguous"/>
                    <column property="created"/>
                    <column property="enabled"/>
                    <column property="updated"/>
                    <column property="id"/>
                </columns>
            </dataGrid>
        </split>
    </layout>
</window>

Screen Shot 2017-09-19 at 16.59.44

#2

Hi Sanchit,

At first sight, you can try to set CellClickListener to the upper table to retrieve the selected row changes, and use this listener to pass annotation_id as a custom parameter to the refresh() method of the lower table’s datasource.

Please try this. If it doesn’t work, could you attach a sample project, so it would be easier for us to suggest you a solution. Thank you.

#3

Hi Olga,

I used ItemClickAction and updated the query, works fine!


AnnotationFieldDataGrid.setItemClickAction(new AbstractAction("itemClickAction") {
            @Override
            public void actionPerform(Component component) {

                Annotation annotation = AnnotationFieldDataGrid.getSingleSelected();

                if(annotation!= null){

                    aliasesDs.setQuery("select e from myproject$Alias e where e.annotation.id="+'\''+annotation.getId()+'\'');

                    aliasesDs.refresh();

                }
            }
        });

Thank you for your suggestion, I will try with CellClickListener.

#4

Hi Olga,

How can I do inline editing here??

#5

As usual.

#6

Is there a method which allows you to define an action that will be performed when a table row is single-clicked?

#7

You can set an ItemChangeListener to the table’s datasource that will be triggered each time the selected item is changed.

#8

I am using ItemClickAction as mentioned above (which works on double click) but with this I cannot do the inline editing.
So, is there a way I can achieve the same by single click action and let the double click works for inline editing?

#9

ItemChangeListener is not the same as ItemClickAction . Use listener to retrieve single click actions.

1 Like