diff --git a/__snapshots__/data grid data API.md b/__snapshots__/data grid data API.md
index 8aca971c97..8954899e56 100644
--- a/__snapshots__/data grid data API.md
+++ b/__snapshots__/data grid data API.md
@@ -3,6 +3,13 @@
#### `should have items as data provider`
```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
- A
-
-
-
-
- B
-
-
-
-
- C
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```html
-
-
-
-
-
-
-
-
-
- A
-
-
-
-
- B
-
-
-
-
- C
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```html
-
-
-
-
-
-
-
-
-
- B1
-
-
-
-
- C
-
-
-
-
-
-
-
-
-
-
-
-```
-
diff --git a/components/data-grid/src/adapters/vaadin/vwc-data-grid-adapter-vaadin.ts b/components/data-grid/src/adapters/vaadin/vwc-data-grid-adapter-vaadin.ts
index af73bb4b5c..35a0baa4e1 100644
--- a/components/data-grid/src/adapters/vaadin/vwc-data-grid-adapter-vaadin.ts
+++ b/components/data-grid/src/adapters/vaadin/vwc-data-grid-adapter-vaadin.ts
@@ -1,11 +1,13 @@
-import '@vaadin/vaadin-grid';
-import type { GridColumnElement, GridElement, GridEventContext } from '@vaadin/vaadin-grid';
-import '@vaadin/vaadin-grid/vaadin-grid-column';
-import '@vaadin/vaadin-grid/vaadin-grid-tree-column';
+import '@vaadin/vaadin-grid/src/vaadin-grid.js';
+import '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
+import '@vaadin/vaadin-grid/src/vaadin-grid-tree-column.js';
import '../../headers/vwc-data-grid-header.js';
import {
DataGrid, EventContext, GRID_COMPONENT, GRID_ENGINE_ROOT_CLASS
} from '../../vwc-data-grid-api.js';
+import type { GridElement } from '@vaadin/vaadin-grid/src/vaadin-grid.js';
+import type { GridColumnElement } from '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
+import type { GridEventContext } from '@vaadin/vaadin-grid/src/interfaces.js';
import type { DataGridColumn } from '../../vwc-data-grid-column-api.js';
import type { DataGridAdapter } from '../vwc-data-grid-adapter-api.js';
import type { MetaRendererProvider, DataRendererProvider, RowDetailsRendererProvider } from '../vwc-data-grid-render-provider-api.js';
@@ -59,6 +61,18 @@ class VWCDataGridAdapterVaadin implements DataGridAdapter {
_items = undefined;
}
return html`
+
+
+
+
+
+
${this.#vwcGrid.columns.map(cc => this.renderColumnDef(cc))}
`;
diff --git a/components/data-grid/src/vwc-data-grid.ts b/components/data-grid/src/vwc-data-grid.ts
index 77eb4773ac..49513c2c35 100644
--- a/components/data-grid/src/vwc-data-grid.ts
+++ b/components/data-grid/src/vwc-data-grid.ts
@@ -20,8 +20,10 @@ import {
property,
LitElement,
TemplateResult,
+ query,
} from 'lit-element';
import type { DataGridAdapter } from './adapters/vwc-data-grid-adapter-api.js';
+import type { GridElement } from '@vaadin/vaadin-grid';
export {
GRID_COMPONENT,
@@ -47,6 +49,9 @@ declare global {
@customElement('vwc-data-grid')
export class VWCDataGrid extends LitElement implements DataGrid {
static styles = [vwcDataGridStyle, ...VWCDataGridAdapterVaadin.getStylesOverlay()];
+
+ @query(`.${GRID_ENGINE_ROOT_CLASS}`) baseGrid!: GridElement;
+
#gridAdapter = new VWCDataGridAdapterVaadin(this) as DataGridAdapter;
@property({ type: Boolean, reflect: true, attribute: 'multi-sort' })
@@ -124,7 +129,7 @@ export class VWCDataGrid extends LitElement implements DataGrid {
protected firstUpdated(): void {
this.addEventListener(COLUMN_DEFINITION_UPDATE_EVENT, () => this.processColumnDefs());
this.processColumnDefs();
- this.shadowRoot?.firstElementChild?.addEventListener('selected-items-changed', (e) => {
+ this.baseGrid?.addEventListener('selected-items-changed', (e) => {
// this will happen twice: https://github.com/vaadin/vaadin-grid/issues/859, therefore treatment:
const ne = e as CustomEvent;
if (ne.detail && typeof ne.detail.path === 'string' && ne.detail.path.includes('length')) {
diff --git a/ui-tests/snapshots/vwc-data-grid.png b/ui-tests/snapshots/vwc-data-grid.png
index ad3371793f..6d813bf636 100644
Binary files a/ui-tests/snapshots/vwc-data-grid.png and b/ui-tests/snapshots/vwc-data-grid.png differ
diff --git a/ui-tests/tests/vwc-data-grid/index.js b/ui-tests/tests/vwc-data-grid/index.js
index 9b91774a0a..a3efe46e28 100644
--- a/ui-tests/tests/vwc-data-grid/index.js
+++ b/ui-tests/tests/vwc-data-grid/index.js
@@ -6,6 +6,7 @@ export async function createElementVariations(wrapper) {
const tmpWrapper = document.createElement('div');
tmpWrapper.innerHTML = `
+
@@ -16,6 +17,7 @@ export async function createElementVariations(wrapper) {
const grid = tmpWrapper.querySelector('vwc-data-grid');
grid.items = sequentalData({ fname: 'A-{i}', lname: 'B-{i}' }, 100000);
return grid.updateComplete.then(() => {
+ grid.selectItem(grid.items[1]);
grid.columns[2].cellRenderer = cellRenderer;
});
}