Add jQuery implementation in v24.2.5

charlescordialDevExpress · charlescordialDevExpress · commit fc223360e6ef · 2025-05-02T15:31:28.000+08:00
diff --git a/jQuery/src/index.css b/jQuery/src/index.css
@@ -1,4 +0,0 @@
-.demo-container {
-    margin: 50px;
-    width: 90vh;
-}
diff --git a/jQuery/src/index.html b/jQuery/src/index.html
@@ -15,7 +15,7 @@
 
   <body class="dx-viewport">
     <div class="demo-container">
-      <div id="btn"></div>
+      <div id="gridContainer"></div>
     </div>
   </body>
-</html>
+</html>
diff --git a/jQuery/src/index.js b/jQuery/src/index.js
@@ -1,10 +1,69 @@
-$(() => {
-  let count = 0;
-  $('#btn').dxButton({
-    text: `Click count: ${count}`,
-    onClick(e) {
-      count += 1;
-      e.component.option('text', `Click count: ${count}`);
+$(()=>{
+
+  var employees = [{
+    "ID": 1,
+    "FirstName": "John",
+    "LastName": "Heart",
+    "City": "Los Angeles"
+  }, {
+      "ID": 2,
+      "FirstName": "Olivia",
+      "LastName": "Peyton",
+      "City": "Los Angeles"
+  }, {
+      "ID": 3,
+      "FirstName": "Robert",
+      "LastName": "Reagan",
+      "City": "Bentonville"
+  }, {
+      "ID": 4,
+      "FirstName": "Greta",
+      "LastName": "Sims",
+      "City": "Boise"
+  }, {
+      "ID": 5,
+      "FirstName": "Brett",
+      "LastName": "Wade",
+      "City": "Atlanta"
+  }];
+
+  $("#gridContainer").dxDataGrid({
+    dataSource: employees,
+    columns: ['FirstName', 'LastName', 'Title', 'City', 'Country'],
+    paging: {
+        pageSize: 10
     },
+    pager: {
+        showPageSizeSelector: true,
+        allowedPageSizes: [5, 10, 20]
+    },
+    editing: {
+        mode: "row",
+        allowUpdating: true,
+        allowDeleting: true,
+        allowAdding: true
+    },
+    onContextMenuPreparing: function (e) {
+      if (e.row.rowType === "data") {
+          e.items = [{
+              text: "edit",
+              onItemClick: function () {
+                  e.component.editRow(e.row.rowIndex);
+              }
+          },
+          {
+              text: "insert",
+              onItemClick: function () {
+                  e.component.addRow();
+              }
+          },
+          {
+              text: "delete",
+              onItemClick: function () {
+                  e.component.deleteRow(e.row.rowIndex);
+              }
+          }];
+      }
+    }
   });
-});
+})
