$(() => { const dataGrid = $('#gridContainer').dxDataGrid({ dataSource: customers, keyExpr: 'ID', allowColumnReordering: true, width: '100%', showBorders: true, grouping: { autoExpandAll: true, }, searchPanel: { visible: true, }, paging: { pageSize: 10, }, pager: { visible: true, }, groupPanel: { visible: true, }, columns: [ 'CompanyName', 'Phone', 'Fax', 'City', { dataField: 'State', groupIndex: 0, }, ], }).dxDataGrid('instance'); $('#autoExpand').dxCheckBox({ value: true, text: 'Expand All Groups', onValueChanged(data) { dataGrid.option('grouping.autoExpandAll', data.value); }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.4"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div id="autoExpand"></div> </div> </div> </div> </body> </html>
.options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }
const customers = [{ ID: 1, CompanyName: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', }, { ID: 2, CompanyName: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', }, { ID: 3, CompanyName: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', }, { ID: 4, CompanyName: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500', Fax: '(847) 286-2501', }, { ID: 5, CompanyName: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500', Fax: '(847) 940-2501', }, { ID: 6, CompanyName: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741', Fax: '(817) 820-0742', }, { ID: 7, CompanyName: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929', Fax: '(800) 955-9392', }, { ID: 8, CompanyName: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000', Fax: '(612) 291-2001', }, { ID: 9, CompanyName: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800', Fax: '(630) 438-7801', }, { ID: 10, CompanyName: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000', Fax: '(214) 854-3001', }, { ID: 11, CompanyName: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937', Fax: '(800) 445-6938', }, { ID: 12, CompanyName: 'Braeburn', Address: '1 Infinite Loop', City: 'Cupertino', State: 'California', Zipcode: 95014, Phone: '(408) 996-1010', Fax: '(408) 996-1012', }, { ID: 13, CompanyName: 'PriceCo', Address: '30 Hunter Lane', City: 'Camp Hill', State: 'Pennsylvania', Zipcode: 17011, Phone: '(717) 761-2633', Fax: '(717) 761-2334', }, { ID: 14, CompanyName: 'Ultimate Gadget', Address: '1557 Watson Blvd', City: 'Warner Robbins', State: 'Georgia', Zipcode: 31093, Phone: '(995) 623-6785', Fax: '(995) 623-6786', }, { ID: 15, CompanyName: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', }, { ID: 16, CompanyName: 'EZ Stop', Address: '618 Michillinda Ave.', City: 'Arcadia', State: 'California', Zipcode: 91007, Phone: '(626) 265-8632', Fax: '(626) 265-8633', }, { ID: 17, CompanyName: 'Clicker', Address: '1100 W. Artesia Blvd.', City: 'Compton', State: 'California', Zipcode: 90220, Phone: '(310) 884-9000', Fax: '(310) 884-9001', }, { ID: 18, CompanyName: 'Store of America', Address: '2401 Utah Ave. South', City: 'Seattle', State: 'Washington', Zipcode: 98134, Phone: '(206) 447-1575', Fax: '(206) 447-1576', }, { ID: 19, CompanyName: 'Zone Toys', Address: '1945 S Cienega Boulevard', City: 'Los Angeles', State: 'California', Zipcode: 90034, Phone: '(310) 237-5642', Fax: '(310) 237-5643', }, { ID: 20, CompanyName: 'ACME', Address: '2525 E El Segundo Blvd', City: 'El Segundo', State: 'California', Zipcode: 90245, Phone: '(310) 536-0611', Fax: '(310) 536-0612', }];
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4