Your search did not match any results.
Data Grid

Row Template

Row templates allow you to display custom content in grid rows. In this demo, a row template adds employee images and extra information to regular grid rows.

To configure a row template, use the rowTemplate property (rowRender in React). Define row markup in a <tbody> element with the dx-row class.

You should disable or implement certain DataGrid features to use row templates. Refer to the rowTemplate article for details.

Backend API
Copy to CodePen
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.dataGridOptions = { dataSource: employees, keyExpr: "ID", rowTemplate: $("#gridRow"), columnAutoWidth: true, showBorders: true, columns: [{ caption: "Photo", width: 100, allowFiltering: false, allowSorting: false }, { dataField: "Prefix", caption: "Title", width: 70 }, "FirstName", "LastName", "Position", { dataField: "BirthDate", dataType: "date" }, { dataField: "HireDate", dataType: "date" } ] }; });
<!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=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <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" ng-app="DemoApp" ng-controller="DemoController"> <div id="gridContainer" dx-data-grid="dataGridOptions" dx-item-alias="employee"></div> <script id="gridRow" type="text/html"> <tbody class="employee dx-row " ng-class="{'dx-row-alt': (employee.rowIndex % 2)}"> <tr class="main-row"> <td rowspan="2"><img ng-src="{{}}"/></td> <td>{{}}</td> <td>{{}}</td> <td>{{}}</td> <td>{{}}</td> <td>{{}}</td> <td>{{}}</td> </tr> <tr class="notes-row"> <td colspan="6"><div>{{}}</div></td> </tr> </tbody> </script> </div> </body> </html>
#gridContainer { height: 450px; } .dx-row img { height: 100px; } #gridContainer tr.main-row td:not(:first-child) { height: 21px; } #gridContainer tr.notes-row { white-space: normal; vertical-align: top; } #gridContainer tr.notes-row td { height: 70px; color: #999; } .dark #gridContainer tr.notes-row td { color: #777; } #gridContainer tbody.employee:hover { background-color: #EBEBEB; } .dark #gridContainer tbody.employee:hover { background-color: #484848; } #gridContainer tbody.employee:hover tr.main-row td { color: #000; } .dark #gridContainer tbody.employee:hover tr.main-row td { color: #CCC; } #gridContainer tbody.employee:hover tr.notes-row td { color: #888; }
var employees = [{ "ID": 1, "FirstName": "John", "LastName": "Heart", "Prefix": "Mr.", "Position": "CEO", "Picture": "../../../../images/employees/01.png", "BirthDate": "3/16/1964", "HireDate": "1/15/1995", "Notes": "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When 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." }, { "ID": 2, "FirstName": "Olivia", "LastName": "Peyton", "Prefix": "Mrs.", "Position": "Sales Assistant", "Picture": "../../../../images/employees/09.png", "BirthDate": "6/3/1981", "HireDate": "5/14/2012", "Notes": "Olivia loves to sell. She has been selling DevAV products since 2012. Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.", "Address": "807 W Paseo Del Mar" }, { "ID": 3, "FirstName": "Robert", "LastName": "Reagan", "Prefix": "Mr.", "Position": "CMO", "Picture": "../../../../images/employees/03.png", "BirthDate": "9/7/1974", "HireDate": "11/8/2002", "Notes": "Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.", "Address": "4 Westmoreland Pl." }, { "ID": 4, "FirstName": "Greta", "LastName": "Sims", "Prefix": "Ms.", "Position": "HR Manager", "Picture": "../../../../images/employees/04.png", "BirthDate": "11/22/1977", "HireDate": "4/23/1998", "Notes": "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp. Greta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.", "Address": "1700 S Grandview Dr." }, { "ID": 5, "FirstName": "Brett", "LastName": "Wade", "Prefix": "Mr.", "Position": "IT Manager", "Picture": "../../../../images/employees/05.png", "BirthDate": "12/1/1968", "HireDate": "3/6/2009", "Notes": "Brett came to DevAv from Microsoft and has led our IT department since 2012. When he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).", "Address": "1120 Old Mill Rd." }, { "ID": 6, "FirstName": "Sandra", "LastName": "Johnson", "Prefix": "Mrs.", "Position": "Controller", "Picture": "../../../../images/employees/06.png", "BirthDate": "11/15/1974", "HireDate": "5/11/2005", "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. Sandra has 2 daughters both of whom are accomplished gymnasts.", "Address": "4600 N Virginia Rd." }, { "ID": 7, "FirstName": "Kevin", "LastName": "Carter", "Prefix": "Mr.", "Position": "Shipping Manager", "Picture": "../../../../images/employees/07.png", "BirthDate": "1/9/1978", "HireDate": "8/11/2009", "Notes": "Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months. When not in the office, he is usually on the basketball court playing pick-up games.", "Address": "424 N Main St." }, { "ID": 8, "FirstName": "Cynthia", "LastName": "Stanwick", "Prefix": "Ms.", "Position": "HR Assistant", "Picture": "../../../../images/employees/08.png", "BirthDate": "6/5/1985", "HireDate": "3/24/2008", "Notes": "Cindy joined us in 2008 and has been in the HR department for 2 years. She was recently awarded employee of the month. Way to go Cindy!", "Address": "2211 Bonita Dr." }, { "ID": 9, "FirstName": "Kent", "LastName": "Samuelson", "Prefix": "Dr.", "Position": "Ombudsman", "Picture": "../../../../images/employees/02.png", "BirthDate": "9/11/1972", "HireDate": "4/22/2009", "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" }];