Your search did not match any results.
Data Grid

Master-Detail View

API Reference
The DevExtreme HTML5 Data Grid Widget supports master-detail views. This interface supplies a standard data row with an expandable section that contains detail data rows. Master-detail data representation is configured using the masterDetail object. In this example, each data row is supplied with a detail section that contains another DevExtreme HTML5 Data Grid Widget.
Copy to Codepen
$(function(){ $("#gridContainer").dxDataGrid({ dataSource: { store: { type: "array", key: "ID", data: employees } }, columns: [{ dataField: "Prefix", caption: "Title", width: 70 }, "FirstName", "LastName", { dataField: "Position", width: 170 }, { dataField: "State", width: 125 }, { dataField: "BirthDate", dataType: "date" } ], masterDetail: { enabled: true, template: function(container, options) { var currentEmployeeData =; container.addClass("internal-grid-container"); $("<div>").text(currentEmployeeData.FirstName + " " + currentEmployeeData.LastName + " Tasks:").appendTo(container); $("<div>") .addClass("internal-grid") .dxDataGrid({ columnAutoWidth: true, columns: ["Subject", { dataField: "StartDate", dataType: "date" }, { dataField: "DueDate", dataType: "date" }, "Priority", { caption: "Completed", dataType: "boolean", calculateCellValue: function(rowData) { return rowData.Status == "Completed"; } }], dataSource: currentEmployeeData.Tasks }).appendTo(container); } } }); });
<!DOCTYPE html> <html xmlns=""> <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="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <script src=""></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> </body> </html>
#gridContainer { height: 440px; width: 100%; } .internal-grid-container { padding: 10px 0 10px 0; } .internal-grid-container > div:first-child { padding: 0 0 5px 10px; font-size: 14px; font-weight: bold; } .internal-grid-container > .internal-grid { border: 1px solid #d2d2d2; }
var employees = [{ "ID": 1, "FirstName": "John", "LastName": "Heart", "Prefix": "Mr.", "Position": "CEO", "Picture": "../../../../images/employees/01.png", "BirthDate": "1964/03/16", "HireDate": "1995/01/15", "Notes": "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.", "Address": "351 S Hill St.", "State": "California", "City": "Los Angeles", "Tasks": [{ "ID": 5, "Subject": "Choose between PPO and HMO Health Plan", "StartDate": "2013-02-15T00:00:00", "DueDate": "2013-04-15T00:00:00", "Status": "In Progress", "Priority": "High", "Completion": 75 }, { "ID": 6, "Subject": "Google AdWords Strategy", "StartDate": "2013-02-16T00:00:00", "DueDate": "2013-02-28T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 7, "Subject": "New Brochures", "StartDate": "2013-02-17T00:00:00", "DueDate": "2013-02-24T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 22, "Subject": "Update NDA Agreement", "StartDate": "2013-03-14T00:00:00", "DueDate": "2013-03-16T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 52, "Subject": "Review Product Recall Report by Engineering Team", "StartDate": "2013-05-17T00:00:00", "DueDate": "2013-05-20T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }] }, { "ID": 2, "FirstName": "Olivia", "LastName": "Peyton", "Prefix": "Mrs.", "Position": "Sales Assistant", "Picture": "../../../../images/employees/09.png", "BirthDate": "1981/06/03", "HireDate": "2012/05/14", "Notes": "Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.", "Address": "807 W Paseo Del Mar", "State": "California", "City": "Los Angeles", "Tasks": [{ "ID": 3, "Subject": "Update Personnel Files", "StartDate": "2013-02-03T00:00:00", "DueDate": "2013-02-28T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 4, "Subject": "Review Health Insurance Options Under the Affordable Care Act", "StartDate": "2013-02-12T00:00:00", "DueDate": "2013-04-25T00:00:00", "Status": "In Progress", "Priority": "High", "Completion": 50 }, { "ID": 21, "Subject": "Non-Compete Agreements", "StartDate": "2013-03-12T00:00:00", "DueDate": "2013-03-14T00:00:00", "Status": "Completed", "Priority": "Low", "Completion": 100 }, { "ID": 50, "Subject": "Give Final Approval for Refunds", "StartDate": "2013-05-05T00:00:00", "DueDate": "2013-05-15T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }] }, { "ID": 3, "FirstName": "Robert", "LastName": "Reagan", "Prefix": "Mr.", "Position": "CMO", "Picture": "../../../../images/employees/03.png", "BirthDate": "1974/09/07", "HireDate": "2002/11/08", "Notes": "Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.", "Address": "4 Westmoreland Pl.", "State": "Arkansas", "City": "Bentonville", "Tasks": [{ "ID": 16, "Subject": "Deliver R&D Plans for 2013", "StartDate": "2013-03-01T00:00:00", "DueDate": "2013-03-10T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 74, "Subject": "Decide on Mobile Devices to Use in the Field", "StartDate": "2013-07-30T00:00:00", "DueDate": "2013-08-02T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 78, "Subject": "Try New Touch-Enabled WinForms Apps", "StartDate": "2013-08-11T00:00:00", "DueDate": "2013-08-15T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 117, "Subject": "Approval on Converting to New HDMI Specification", "StartDate": "2014-01-11T00:00:00", "DueDate": "2014-01-31T00:00:00", "Status": "Deferred", "Priority": "Normal", "Completion": 75 }] }, { "ID": 4, "FirstName": "Greta", "LastName": "Sims", "Prefix": "Ms.", "Position": "HR Manager", "Picture": "../../../../images/employees/04.png", "BirthDate": "1977/11/22", "HireDate": "1998/04/23", "Notes": "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.", "Address": "1700 S Grandview Dr.", "State": "Idaho", "City": "Boise", "Tasks": [{ "ID": 20, "Subject": "Approve Hiring of John Jeffers", "StartDate": "2013-03-02T00:00:00", "DueDate": "2013-03-12T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 23, "Subject": "Update Employee Files with New NDA", "StartDate": "2013-03-16T00:00:00", "DueDate": "2013-03-26T00:00:00", "Status": "Need Assistance", "Priority": "Normal", "Completion": 90 }, { "ID": 40, "Subject": "Provide New Health Insurance Docs", "StartDate": "2013-03-28T00:00:00", "DueDate": "2013-04-07T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }] }, { "ID": 5, "FirstName": "Brett", "LastName": "Wade", "Prefix": "Mr.", "Position": "IT Manager", "Picture": "../../../../images/employees/05.png", "BirthDate": "1968/12/01", "HireDate": "2009/03/06", "Notes": "Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).", "Address": "1120 Old Mill Rd.", "State": "Georgia", "City": "Atlanta", "Tasks": [{ "ID": 2, "Subject": "Prepare 3013 Marketing Plan", "StartDate": "2013-01-01T00:00:00", "DueDate": "2013-01-31T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 11, "Subject": "Rollout of New Website and Marketing Brochures", "StartDate": "2013-02-20T00:00:00", "DueDate": "2013-02-28T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 15, "Subject": "Review 2012 Sales Report and Approve 2013 Plans", "StartDate": "2013-02-23T00:00:00", "DueDate": "2013-02-28T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 81, "Subject": "Review Site Up-Time Report", "StartDate": "2013-08-24T00:00:00", "DueDate": "2013-08-30T00:00:00", "Status": "Completed", "Priority": "Urgent", "Completion": 100 }] }, { "ID": 6, "FirstName": "Sandra", "LastName": "Johnson", "Prefix": "Mrs.", "Position": "Controller", "Picture": "../../../../images/employees/06.png", "BirthDate": "1974/11/15", "HireDate": "2005/05/11", "Notes": "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.", "Address": "4600 N Virginia Rd.", "State": "Utah", "City": "Beaver", "Tasks": [{ "ID": 20, "Subject": "Approve Hiring of John Jeffers", "StartDate": "2013-03-02T00:00:00", "DueDate": "2013-03-12T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 23, "Subject": "Update Employee Files with New NDA", "StartDate": "2013-03-16T00:00:00", "DueDate": "2013-03-26T00:00:00", "Status": "Need Assistance", "Priority": "Normal", "Completion": 90 }, { "ID": 40, "Subject": "Provide New Health Insurance Docs", "StartDate": "2013-03-28T00:00:00", "DueDate": "2013-04-07T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 138, "Subject": "Review HR Budget Company Wide", "StartDate": "2014-03-20T00:00:00", "DueDate": "2014-03-25T00:00:00", "Status": "In Progress", "Priority": "Normal", "Completion": 40 }, { "ID": 145, "Subject": "Final Budget Review", "StartDate": "2014-03-26T00:00:00", "DueDate": "2014-03-27T00:00:00", "Status": "In Progress", "Priority": "High", "Completion": 25 }] }, { "ID": 7, "FirstName": "Kevin", "LastName": "Carter", "Prefix": "Mr.", "Position": "Shipping Manager", "Picture": "../../../../images/employees/07.png", "BirthDate": "1978/01/09", "HireDate": "2009/08/11", "Notes": "Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.", "Address": "424 N Main St.", "State": "California", "City": "San Diego", "Tasks": [{ "ID": 24, "Subject": "Sign Updated NDA", "StartDate": "2013-03-20T00:00:00", "DueDate": "2013-03-25T00:00:00", "Status": "Completed", "Priority": "Urgent", "Completion": 100 }, { "ID": 55, "Subject": "Review Overtime Report", "StartDate": "2013-06-10T00:00:00", "DueDate": "2013-06-14T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 71, "Subject": "Upgrade Server Hardware", "StartDate": "2013-07-22T00:00:00", "DueDate": "2013-07-31T00:00:00", "Status": "Completed", "Priority": "Urgent", "Completion": 100 }, { "ID": 72, "Subject": "Upgrade Personal Computers", "StartDate": "2013-07-24T00:00:00", "DueDate": "2014-04-30T00:00:00", "Status": "In Progress", "Priority": "Normal", "Completion": 85 }] }, { "ID": 8, "FirstName": "Cynthia", "LastName": "Stanwick", "Prefix": "Ms.", "Position": "HR Assistant", "Picture": "../../../../images/employees/08.png", "BirthDate": "1985/06/05", "HireDate": "2008/03/24", "Notes": "Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!", "Address": "2211 Bonita Dr.", "State": "Arkansas", "City": "Little Rock", "Tasks": [{ "ID": 1, "Subject": "Prepare 2013 Financial", "StartDate": "2013-01-15T00:00:00", "DueDate": "2013-01-31T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 25, "Subject": "Sign Updated NDA", "StartDate": "2013-03-20T00:00:00", "DueDate": "2013-03-25T00:00:00", "Status": "Completed", "Priority": "Urgent", "Completion": 100 }, { "ID": 35, "Subject": "Update Revenue Projections", "StartDate": "2013-03-24T00:00:00", "DueDate": "2013-04-07T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 99, "Subject": "Submit D&B Number to ISP for Credit Approval", "StartDate": "2013-11-04T00:00:00", "DueDate": "2013-11-07T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }] }, { "ID": 9, "FirstName": "Kent", "LastName": "Samuelson", "Prefix": "Dr.", "Position": "Ombudsman", "Picture": "../../../../images/employees/02.png", "BirthDate": "1972/09/11", "HireDate": "2009/04/22", "Notes": "As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.", "Address": "12100 Mora Dr", "State": "Missouri", "City": "St. Louis", "Tasks": [{ "ID": 12, "Subject": "Update Sales Strategy Documents", "StartDate": "2013-02-20T00:00:00", "DueDate": "2013-02-22T00:00:00", "Status": "Completed", "Priority": "Normal", "Completion": 100 }, { "ID": 26, "Subject": "Sign Updated NDA", "StartDate": "2013-03-20T00:00:00", "DueDate": "2013-03-25T00:00:00", "Status": "Need Assistance", "Priority": "Urgent", "Completion": 25 }, { "ID": 36, "Subject": "Review Revenue Projections", "StartDate": "2013-03-25T00:00:00", "DueDate": "2013-04-06T00:00:00", "Status": "Completed", "Priority": "High", "Completion": 100 }, { "ID": 60, "Subject": "Refund Request Template", "StartDate": "2013-06-17T00:00:00", "DueDate": "2014-04-01T00:00:00", "Status": "Deferred", "Priority": "Normal", "Completion": 0 }] }];