Lazy load and checkbox select all on the grid

Hilla
1

Hi eveyone!

<properties>
    <java.version>17</java.version>
    <hilla.version>1.2.3</hilla.version>
    <selenium.version>4.4.0</selenium.version>
</properties>

I have a problem render checkbox “select all” on the grid with Lazy loading.

The method below for get a data and counts:

getData() {
        const gridIt = this.gridIt
        gridIt.dataProvider = (params: any, callback: any) => {
            TmcEndpoint.getAllTmcIt(params.filters, params.sortOrders, params.page, params.pageSize)
                .then((value: any) => {
                    if (value.errMsg) {
                    } else {
                        callback(value.data);
                    }
                }).catch((e: any) => {
                })

  TmcEndpoint.getAllTmcItCount(params.filters)
                .then((value: any) => {
                    if (value.errMsg) {
                    } else {
                        gridIt.size = value.data;
                        this.tmcItLength = gridIt.size;
                    }
                }).catch((e: any) => {
                })
        }
    }

Grid query:
@query("#tmc-it-grid") private gridIt : any;

Piece of UI

<div class="form-content">
    <div class="form-content-top">
    </div>
    <vaadin-grid id="tmc-it-grid">
        <vaadin-grid-selection-column flex-grow="0" auto-select></vaadin-grid-selection-column>
        <vaadin-grid-column-group id="id-column-group" .headerRenderer="${this.renderIdGroupHeader}">
            <vaadin-grid-column
                    id="id-column"
                    path="id"
                    .headerRenderer="${this.renderIdHeader}">
            </vaadin-grid-column>
        </vaadin-grid-column-group>
    </vaadin-grid>
</div>

If I fill grid like this
<vaadin-grid id="tmc-it-grid" .items = ${this.dataIt}>
then checkbox is avialable, but data contains first 50 items.

изображение

2

Only thing I can provide are docs with an example: vaadin-grid – Selection

3

When lazy loading, the checkbox is not in use as it is depending on the application and its backend logic how that should be defined. Thus you need to use header renderer to add your own component there and tie it to what ever logic you want to define here.

https://cdn.vaadin.com/vaadin-web-components/24.3.13/#/elements/vaadin-grid-selection-column#property-headerRenderer