Dynamic data in lookupPickerField

I have the screen and the screen controller. There are two lookupPickerField components on the screen.

A simple task - when the value in the first of them (PK) changes, in the second one should be loaded dependent values (FK).

Descriptor of my screen:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="msg://editCaption"
        class="com.tkbbank.client.web.item.CardItemEdit"
        datasource="cardItemDs"
        focusComponent="fieldGroup"
        messagesPack="com.tkbbank.client.web.item">

     <dsContext>
        <datasource id="cardItemDs" class="com.tkbbank.client.entity.CardItem" allowCommit="false"/>
            <collectionDatasource id="cardTypeDs" class="com.tkbbank.client.entity.CardType" view="_local">
            <query>
                <![CDATA[select e from demo$CardType e]]>
            </query>
        </collectionDatasource>
            <collectionDatasource id="cardSubTypeDs" class="com.tkbbank.client.entity.CardSubType" view="_local">
            <query>
                <![CDATA[select s from demo$CardSubType s where s.cardType.id = :component$cardSubTypePicker.id]]>
            </query>
        </collectionDatasource>
    </dsContext>

    <dialogMode forceDialog="true" width="AUTO"/>
    <layout expand="windowActions" spacing="true">
        <fieldGroup id="fieldGroup" datasource="cardItemDs">
            <column width="500px">

                <field id="cardType" caption="Тип документа">
                    <lookupPickerField id="cardTypePicker" optionsDatasource="cardTypeDs"/>
                </field>
                <field id="cardSubType" caption="Подтип документа">
                    <lookupPickerField id="cardSubTypePicker" optionsDatasource="cardSubTypeDs"/>
                </field>

                // Skipped

Controller of my screen:

public class CardItemEdit extends AbstractEditor<CardItem> {

    @Inject
    private Datasource<CardItem> cardItemDs;

    @Inject
    private Metadata metadata;

    @Inject
    private CollectionDatasource<CardSubType, UUID> cardSubTypeDs;

    @Inject
    private LookupPickerField cardTypePicker;

    @Override
    public void init(Map<String, Object> params) {
        CardItem cardItem = metadata.create(CardItem.class);
        cardItemDs.setItem(cardItem);

        cardTypePicker.addValueChangeListener(e -> cardSubTypeDs.refresh());
    }
}

Entity CardSubType:

@NamePattern("Подтип входящего документа: %s |subtype")
@Table(name = "DEMO_CARD_SUB_TYPE")
@Entity(name = "demo$CardSubType")
public class CardSubType extends StandardEntity {
    private static final long serialVersionUID = -3558412722346178348L;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "CARD_TYPE_ID")
    protected CardType cardType;

    // Skipped

So, I select a value in the cardTypePicker, but the second component remains empty. Both tables have the data.

What could be the problem?

I would be very grateful for the information. Thanks to all.

Mario David answered this question here.

Thank you, Mario!

With the following datasource for the screen all dropdown's works well:

 <dsContext>
    <datasource id="cardItemDs" class="com.tkbbank.client.entity.CardItem" allowCommit="false" view="card-item-view"/>
        <collectionDatasource id="cardTypeDs" class="com.tkbbank.client.entity.CardType">
        <query>
            <![CDATA[select e from demo$CardType e]]>
        </query>
    </collectionDatasource>
        <collectionDatasource id="cardSubTypeDs" class="com.tkbbank.client.entity.CardSubType">
        <query>
            <![CDATA[select s from demo$CardSubType s where s.cardType.id = :ds$cardTypeDs]]>
        </query>
    </collectionDatasource>
</dsContext>