From 50ebf55c051ce0502afa8898be0e39c4ab776057 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 25 Sep 2024 10:00:16 +0300
Subject: [PATCH] --wip-- [skip ci]

---
 dev/grid-pro.html | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)
diff --git a/dev/grid-pro.html b/dev/grid-pro.html
index bc5135aab8..5ef0b2be59 100644
--- 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>
