Your search did not match any results.
List

Grouped List

API Reference
The dxList widget can display data source items as a grouped list. Each item within a group is displayed under the group caption.
Copy to Codepen
Apply
Reset
$(function(){ var listWidget = $("#simpleList").dxList({ dataSource: employees, height: "100%", grouped: true, collapsibleGroups: true, groupTemplate: function(data) { return $("<div>Assigned: " + data.key + "</div>"); } }).dxList("instance"); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></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 class="list-container"> <div id="simpleList"></div> </div> </div> </body> </html>
.list-container { min-height: 440px; width: 100%; height: auto; position: absolute; top: 0; bottom: 0; }
var employees = [{ "key": "Mr. John Heart", "items": ["Choose between PPO and HMO Health Plan", "Google AdWords Strategy", "New Brochures", "Update NDA Agreement", "Review Product Recall Report by Engineering Team"] }, { "key": "Mrs. Olivia Peyton", "items": ["Update Personnel Files", "Review Health Insurance Options Under the Affordable Care Act", "Non-Compete Agreements", "Give Final Approval for Refunds"] }, { "key": "Mr. Robert Reagan", "items": ["Deliver R&D Plans for 2013", "Decide on Mobile Devices to Use in the Field", "Try New Touch-Enabled WinForms Apps", "Approval on Converting to New HDMI Specification"] }, { "key": "Ms. Greta Sims", "items": ["Approve Hiring of John Jeffers", "Update Employee Files with New NDA", "Provide New Health Insurance Docs"] }, { "key": "Mr. Brett Wade", "items": ["Prepare 3013 Marketing Plan", "Rollout of New Website and Marketing Brochures", "Review 2012 Sales Report and Approve 2013 Plans", "Review Site Up-Time Report"] }, { "key": "Mrs. Sandra Johnson", "items": ["Approve Hiring of John Jeffers", "Update Employee Files with New NDA", "Provide New Health Insurance Docs", "Review HR Budget Company Wide", "Final Budget Review"] }, { "key": "Mr. Kevin Carter", "items": ["Sign Updated NDA", "Review Overtime Report", "Upgrade Server Hardware", "Upgrade Personal Computers"] }, { "key": "Ms. Cynthia Stanwick", "items": ["Prepare 2013 Financial", "Sign Updated NDA", "Update Revenue Projections", "Submit D&B Number to ISP for Credit Approval"] }, { "key": "Dr. Kent Samuelson", "items": ["Update Sales Strategy Documents", "Sign Updated NDA", "Review Revenue Projections", "Refund Request Template"] }];