dataGrid

LIVE DEMO

dataGrid is designed to display and sort tabular data and provides means to manipulate rows and columns with great performance due to the lazy loading of data while scrolling.

XML element: dataGrid
Java class: DataGrid

Basics

An example of dataGrid declaration in the XML view descriptor is shown below:

<data readOnly="true">
    <collection id="usersDc"
                class="com.company.onboarding.entity.User"> (1)
        <fetchPlan extends="_base"/>
        <loader id="usersDl">
            <query>
                <![CDATA[select e from User e order by e.username]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <dataGrid id="usersTable"
              width="100%"
              minHeight="20em"
              dataContainer="usersDc"> (2)
        <columns> (3)
            <column property="username"/>
            <column property="firstName"/>
            <column property="lastName"/>
            <column property="active"/>
            <column property="onboardingStatus"/>
            <column property="joiningDate"/>
        </columns>
    </dataGrid>
</layout>

1	Collection container for the `User` entity.
2	`dataGrid` is bound to the `usersDc` container using the `dataContainer` attribute.
3	The `columns` element defines which entity attributes are shown in the data grid columns.

Data Binding

Declarative Binding

Usually, you bind dataGrid to data declaratively in the view XML descriptor using the dataContainer attribute. It should refer to a collection container.

Using Key-Value Containers

You can bind the data grid to a key-value container to display the results of a query that returns scalar values and/or aggregates. For example:

<data readOnly="true">
    <keyValueCollection id="statusesDc">
        <loader id="statusesLoader">
            <query>
                <![CDATA[select o.department, o.onboardingStatus,
                count(o.onboardingStatus) from
                User o group by o.department, o.onboardingStatus]]>
            </query>
        </loader>
        <properties>
            <property name="department" datatype="string"/>
            <property name="onboardingStatus" datatype="int"/>
            <property name="count" datatype="int"/>
        </properties>
    </keyValueCollection>
</data>
<layout>
    <dataGrid width="100%" dataContainer="statusesDc">
        <columns>
            <column property="department"/>
            <column property="onboardingStatus"/>
            <column property="count"/>
        </columns>
    </dataGrid>
</layout>

Programmatic Binding

If you need to define a data container programmatically in the view controller, set the metaClass attribute instead of dataContainer in XML descriptor:

<dataGrid width="100%" id="dataGrid" metaClass="User">
    <columns>
        <column property="firstName"/>
        <column property="lastName"/>
        <column property="username"/>
        <column property="joiningDate"/>
        <column property="onboardingStatus"/>
    </columns>
</dataGrid>

In the view controller, use the ContainerDataGridItems class to bind the data grid to a data container:

@ViewComponent
private DataGrid<User> dataGrid;

@ViewComponent
private CollectionContainer<User> usersDc;

@Subscribe
public void onInit(InitEvent event) {
    dataGrid.setItems(new ContainerDataGridItems<>(usersDc));
}

Columns

The set of columns for a data grid is defined in the columns nested element. columns can have the following attributes:

includeAll includes all the attributes from the fetch plan that is defined in the data container.

In the example below, we will show all the attributes from the fetch plan used in usersDc:

<dataGrid width="100%"
          dataContainer="usersDc">
    <columns includeAll="true"/>
</dataGrid>

If the entity fetch plan contains a reference attribute, this attribute will be displayed according to its instance name. If you want to show a specific nested attribute, define it in the fetch plan as well as in the column element:

<data readOnly="true">
    <collection class="com.company.onboarding.entity.UserStep" id="userStepsDc">
        <fetchPlan extends="_base">
            <property name="user" fetchPlan="_base">
                <property name="department" fetchPlan="_base"/>
            </property>
        </fetchPlan>
        <loader id="userStepsDl">
            <query>
                <![CDATA[select e from UserStep e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <dataGrid width="100%"
              dataContainer="userStepsDc">
        <columns includeAll="true">
            <column property="user.department.name"/>
        </columns>
    </dataGrid>
</layout>

exclude contains a comma-separated list of attributes that should not be displayed in the data grid.

In the example below, we will show all the attributes excluding id, version, sortValue:
```
<dataGrid width="100%"
          dataContainer="userStepsDc">
    <columns includeAll="true"
             exclude="id,version,sortValue"/>
</dataGrid>
```

Column

Each column is described in a nested column element.

To add column in Jmix Studio, select the columns element in the view descriptor XML or in the Jmix UI hierarchy panel and click on the Add→Column button in the Jmix UI inspector panel.

1	Define a `buttonsPanel` `hbox` container above the data grid.
2	Define the `list_create` standard action.
3	Define the `getInfo` custom action.

1	Adds a new column that shows the `image` component.
2	The `Image` component instance is created using the `UiComponents` factory.
3	`image` gets its content from the given `StreamResource` by the reference stored in the `picture` attribute of the `User` entity.
4	The `addComponentColumn()` method returns the visual component to be shown in the column cells.

1	Get the instance of `DataGridEditor`.
2	The `JmixComboBox` component instance is created using the `UiComponents` factory.
3	Set StatusChangeHandler.
4	The `setColumnEditorComponent()` method returns the visual component to be shown as the column editor component.

dataGrid

Basics

Data Binding

Declarative Binding

Using Key-Value Containers

Programmatic Binding

Columns

Column

autoWidth

editable

flexGrow

footer

frozen

header

key

property

resizable

sortable

textAlign

visible

width

Actions

Using Renderers

Inline Editing

editorActionsColumn

DataGridEditor

SupportsStatusChangeHandler

Double-click Editing

Attributes

allRowsVisible

columnReorderingAllowed

detailsVisibleOnClick

dropMode

editorBuffered

nestedNullBehavior

pageSize

rowDraggable

selectionMode

Handlers

CellFocusEvent

ColumnReorderEvent

ColumnResizeEvent

GridDragEndEvent

GridDragStartEvent

GridDropEvent

ItemClickEvent

ItemDoubleClickEvent

SortEvent

classNameGenerator

dataGenerator

dragFilter

dropFilter

Elements

See Also