Datagrid inline editor

Support
#1

Good morning, I am trying to fill a DataGrid as if it were an excel, I have two columns, the first column supports manual entry of a code (string) and what I want to do is to enter it and press Enter, launch a query to the database to obtain the description associated with that code, and insert it into the second column of the Datagrid. Any idea how to implement that functionality?, I’ve been trying with DataGrid inline editor but I can not get it.
Thanks and greetings.

#3

Hello!

For inline editor try to subscribe on EditorPreCommitEvent. This event also can be invoked by ENTER key and there you can load additional data and update entity value:

@Subscribe("dataGrid")
public void onOrdersTableEditorPreCommit(DataGrid.EditorPreCommitEvent event) {
    Order order = (Order) event.getItem();
    
    // load data using DataManager
    String loadedValue = dataManager.load(...);

    // set loaded value
    order.setDescription(loadedValue);
}

<dataGrid id="ordersTable"
          width="100%"
          editorEnabled="true"
          dataContainer="data_container">
    <actions>
        ...
    </actions>
    <columns>
        <column property="code"/>
        <column property="description" editable="false"/>
    </columns>
    <buttonsPanel>
        ...
    </buttonsPanel>
</dataGrid>

The other way is to use column generator with TextField. Add value change listener, load data and update entity value.

Column generator 
@Install(to = "dataGrid.code", subject = "columnGenerator")
private Component ordersTableNameColumnGenerator(DataGrid.ColumnGeneratorEvent<Order> event) {
    TextField<String> field = uiComponents.create(TextField.NAME);
    field.setWidthFull();
    field.setValueSource(new ContainerValueSource<>(event.getContainer(), "code"));
    field.addValueChangeListener(valueChangeEvent -> {
        Order order = (Order) event.getItem();
    
         // load data using DataManager
        String loadedValue = dataManager.load(...);

        // set loaded value
        order.setDescription(loadedValue);
    });
    return field;
}

<dataGrid id="dataGrid"
          width="100%"
          dataContainer="data_container">
    <actions>
        ...
    </actions>
    <columns>
        <column id="code" property="code">
            <componentRenderer/>
        </column>
        <column property="description"/>
    </columns>
    <buttonsPanel ...>
        ...
    </buttonsPanel>
</dataGrid>
1 Like
#4

Thank you Roma.