--wip-- [skip ci]

vaadin · Sep 25, 2024 · 50ebf55 · 50ebf55
1 parent b309b7e
commit 50ebf55
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/dev/grid-pro.html b/dev/grid-pro.html
@@ -8,30 +8,33 @@
  <script type="module" src="./common.js"></script>
  </head>
  <body>
- <vaadin-grid-pro single-cell-edit>
- <vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>
- <vaadin-grid-pro-edit-column path="name.last"></vaadin-grid-pro-edit-column>
- <vaadin-grid-pro-edit-column
- path="name.title"
- editor-type="select"
- editor-options='["mr", "mrs", "ms"]'
- ></vaadin-grid-pro-edit-column>
- <vaadin-grid-pro-edit-column path="married" editor-type="checkbox"></vaadin-grid-pro-edit-column>
- </vaadin-grid-pro>
+ <vaadin-grid-pro>
+ <vaadin-grid-pro-edit-column path="date" editor-type="custom"></vaadin-grid-pro-edit-column>
+ <vaadin-grid-pro-edit-column id="datetime" header="Date and time" editor-type="custom"></vaadin-grid-pro-edit-column>
+ </vaadin-gri-pro>
 
  <script type="module">
- // PolymerElement based imports
+ import '@vaadin/date-picker';
+ import '@vaadin/date-time-picker';
  import '@vaadin/grid-pro';
  import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
 
- // LitElement based imports
- // import '@vaadin/grid-pro/vaadin-lit-grid-pro.js';
- // import '@vaadin/grid-pro/vaadin-lit-grid-pro-edit-column.js';
+ const grid = document.querySelector('vaadin-grid-pro');
 
- import { users } from '../packages/grid-pro/test/visual/users.js';
+ grid.items = [
+ { date: '1984-01-13', status: 'suspended', time: '09:00' },
+ { date: '1977-07-12', status: 'active', time: '09:30' },
+ { date: '1976-12-14', status: 'suspended', time: '10:00' },
+ { date: '1972-12-04', status: 'active', time: '10:00' },
+ { date: '1978-02-03', status: 'active', time: '10:00' },
+ ];
 
- const grid = document.querySelector('vaadin-grid-pro');
- grid.items = users;
+ grid.querySelector('[path="birthday"]').editModeRenderer = (root, _, model) => {
+ root.innerHTML = `
+ <vaadin-date-picker value="${model.item.birthday}" auto-open-disabled>
+ </vaadin-date-picker>
+ `;
+ };
  </script>
  </body>
 </html>