example: jquery

DevExpress · Jun 14, 2024 · eaa3962 · eaa3962
1 parent 0ab8f70
commit eaa3962
Showing 1 changed file with 190 additions and 6 deletions.
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>DevExtreme jQuery Example</title>
 
@@ -41,23 +42,206 @@
     <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
     <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+    <style>
+        #grid {
+            height: 440px;
+        }
+
+        .options {
+            padding: 20px;
+            margin-top: 20px;
+            background-color: rgba(191, 191, 191, 0.15);
+        }
+
+        .caption {
+            margin-bottom: 10px;
+            font-weight: 500;
+            font-size: 18px;
+        }
+
+        .option {
+            margin-bottom: 10px;
+        }
+
+        .option>span {
+            position: relative;
+            top: 2px;
+            margin-right: 10px;
+        }
+
+        .option>.dx-widget {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        #requests .caption {
+            float: left;
+            padding-top: 7px;
+        }
+
+        #requests>div {
+            padding-bottom: 5px;
+        }
+
+        #requests>div::after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        #requests #clear {
+            float: right;
+        }
+
+        #requests ul {
+            list-style: none;
+            max-height: 100px;
+            overflow: auto;
+            margin: 0;
+        }
+
+        #requests ul li {
+            padding: 7px 0;
+            border-bottom: 1px solid #ddd;
+        }
+
+        #requests ul li:last-child {
+            border-bottom: none;
+        }
+    </style>
 </head>
+
 <body class="dx-surface">
     <div role="main">
         <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
 
         <select id="theme-selector" style="display: block;">
         </select>
         <br />
-        <div id="button"></div>
+        <div id="grid"></div>
+        <div class="options">
+            <div class="caption">Options</div>
+        </div>
         <script>
-            $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
+            $(() => {
+                const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';
+
+                const ordersStore = new DevExpress.data.CustomStore({
+                    key: 'OrderID',
+                    load() {
+                        return sendRequest(`${URL}/Orders`);
+                    },
+                    insert(values) {
+                        return sendRequest(`${URL}/InsertOrder`, 'POST', {
+                            values: JSON.stringify(values),
+                        });
+                    },
+                    update(key, values) {
+                        return sendRequest(`${URL}/UpdateOrder`, 'PUT', {
+                            key,
+                            values: JSON.stringify(values),
+                        });
+                    },
+                    remove(key) {
+                        return sendRequest(`${URL}/DeleteOrder`, 'DELETE', {
+                            key,
+                        });
+                    },
                 });
+
+                const dataGrid = $('#grid').dxDataGrid({
+                    dataSource: ordersStore,
+                    repaintChangesOnly: true,
+                    keyboardNavigation: {
+                        enabled: true,
+                        editOnKeyPress: true,
+                        enterKeyAction: "moveFocus",
+                        enterKeyDirection: "column",
+                    },
+                    showBorders: true,
+                    editing: {
+                        refreshMode: 'reshape',
+                        mode: 'cell',
+                        allowAdding: true,
+                        allowUpdating: true,
+                        allowDeleting: true,
+                    },
+                    scrolling: {
+                        mode: 'virtual',
+                    },
+                    columns: [{
+                        dataField: 'CustomerID',
+                        caption: 'Customer',
+                        lookup: {
+                            dataSource: {
+                                paginate: true,
+                                store: new DevExpress.data.CustomStore({
+                                    key: 'Value',
+                                    loadMode: 'raw',
+                                    load() {
+                                        return sendRequest(`${URL}/CustomersLookup`);
+                                    },
+                                }),
+                            },
+                            valueExpr: 'Value',
+                            displayExpr: 'Text',
+                        },
+                    }, {
+                        dataField: 'OrderDate',
+                        dataType: 'date',
+                    }, {
+                        dataField: 'Freight',
+                    }, {
+                        dataField: 'ShipCountry',
+                    }, {
+                        dataField: 'ShipVia',
+                        caption: 'Shipping Company',
+                        dataType: 'number',
+                        lookup: {
+                            dataSource: new DevExpress.data.CustomStore({
+                                key: 'Value',
+                                loadMode: 'raw',
+                                load() {
+                                    return sendRequest(`${URL}/ShippersLookup`);
+                                },
+                            }),
+                            valueExpr: 'Value',
+                            displayExpr: 'Text',
+                        },
+                    },
+                    ],
+                    summary: {
+                        totalItems: [{
+                            column: 'CustomerID',
+                            summaryType: 'count',
+                        }, {
+                            column: 'Freight',
+                            valueFormat: '#0.00',
+                            summaryType: 'sum',
+                        }],
+                    },
+                }).dxDataGrid('instance');
+
+                function sendRequest(url, method = 'GET', data) {
+                    const d = $.Deferred();
+
+                    $.ajax(url, {
+                        method,
+                        data,
+                        cache: false,
+                        xhrFields: { withCredentials: true },
+                    }).done((result) => {
+                        d.resolve(method === 'GET' ? result.data : result);
+                    }).fail((xhr) => {
+                        d.reject(xhr.responseJSON ? xhr.responseJSON.Message : xhr.statusText);
+                    });
+
+                    return d.promise();
+                }
             });
+
         </script>
     </div>
 </body>
-</html>
+
+</html>