Your search did not match any results.
Data Grid

Multiple Sorting

Documentation
The DataGrid widget provides sorting capability against one or more columns, so that you do not have to write a single line of code. A column’s current sort order is indicated by a sort glyph displayed at the rightmost edge of the column header. When not sorted, this glyph is hidden. Click a column header to initiate sorting or change the column’s sort order (ascending to descending and vice versa). Press the Shift key when clicking headers to sort against multiple columns simultaneously. You can also use the popup context menu (right-click a column header) to initiate desired sort operations. In this example, grid columns are initially sorted by the First Name and Last Name columns in ascending order (the sortOrder option of these columns is set to "asc"). You can disable sorting for a specific column by setting its allowSorting option to false.
Copy to Codepen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.gridOptions = { dataSource: employees, sorting: { mode: "multiple" }, columns: [ { dataField: "Prefix", caption: "Title", width: 70 }, { dataField: "FirstName", sortOrder: "asc" }, { dataField: "LastName", sortOrder: "asc" }, "City", "State", { dataField: "Position", width: 130 }, { dataField: "HireDate", dataType: "date" } ] }; $scope.positionSortingOptions = { value: false, text: "Disable Sorting for the Position Column", onValueChanged: function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.columnOption(5, "sortOrder", undefined); dataGrid.columnOption(5, "allowSorting", !data.value); } }; });
<!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/17.1.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/17.1.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" ng-app="DemoApp" ng-controller="DemoController"> <div id="gridContainer" dx-data-grid="gridOptions"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div dx-check-box="positionSortingOptions"></div> </div> </div> </div> </body> </html>
.options { padding: 20px; margin-top: 20px; background-color: #f5f5f5; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }
var employees = [{ "ID" : 1, "FirstName" : "John", "LastName" : "Heart", "Phone" : "(213) 555-9392", "Prefix" : "Mr.", "Position" : "CEO", "BirthDate" : "1964-03-16", "HireDate" : "1995-01-15", "Email" : "jheart@dx-email.com", "Address" : "351 S Hill St.", "City" : "Los Angeles", "StateID" : 5, "State" : "California", "HomePhone" : "(213) 555-9208", "Skype" : "jheartDXskype" }, { "ID" : 2, "FirstName" : "Olivia", "LastName" : "Peyton", "Phone" : "(310) 555-2728", "Prefix" : "Mrs.", "Position" : "Sales Assistant", "BirthDate" : "1981-06-03", "HireDate" : "2012-05-14", "Email" : "oliviap@dx-email.com", "Address" : "807 W Paseo Del Mar", "City" : "Los Angeles", "StateID" : 5, "State" : "California", "HomePhone" : "(310) 555-4547", "Skype" : "oliviapDXskype" }, { "ID" : 3, "FirstName" : "Robert", "LastName" : "Reagan", "Phone" : "(818) 555-2387", "Prefix" : "Mr.", "Position" : "CMO", "BirthDate" : "1974-09-07", "HireDate" : "2002-11-08", "Email" : "robertr@dx-email.com", "Address" : "4 Westmoreland Pl.", "City" : "Bentonville", "StateID" : 4, "State" : "Arkansas", "HomePhone" : "(818) 555-2438", "Skype" : "robertrDXskype" }, { "ID" : 4, "FirstName" : "Greta", "LastName" : "Sims", "Phone" : "(818) 555-6546", "Prefix" : "Ms.", "Position" : "HR Manager", "BirthDate" : "1977-11-22", "HireDate" : "1998-04-23", "Email" : "gretas@dx-email.com", "Address" : "1700 S Grandview Dr.", "City" : "Atlanta", "StateID" : 11, "State" : "Georgia", "HomePhone" : "(818) 555-0976", "Skype" : "gretasDXskype" }, { "ID" : 5, "FirstName" : "Brett", "LastName" : "Wade", "Phone" : "(626) 555-0358", "Prefix" : "Mr.", "Position" : "IT Manager", "BirthDate" : "1968-12-01", "HireDate" : "2009-03-06", "Email" : "brettw@dx-email.com", "Address" : "1120 Old Mill Rd.", "City" : "Boise", "StateID" : 13, "State" : "Idaho", "HomePhone" : "(626) 555-5985", "Skype" : "brettwDXskype" }, { "ID" : 6, "FirstName" : "Sandra", "LastName" : "Johnson", "Phone" : "(562) 555-2082", "Prefix" : "Mrs.", "Position" : "Controller", "BirthDate" : "1974-11-15", "HireDate" : "2005-05-11", "Email" : "sandraj@dx-email.com", "Address" : "4600 N Virginia Rd.", "City" : "Beaver", "StateID" : 44, "State" : "Utah", "HomePhone" : "(562) 555-8272", "Skype" : "sandrajDXskype" }, { "ID" : 7, "FirstName" : "Kevin", "LastName" : "Carter", "Phone" : "(213) 555-2840", "Prefix" : "Mr.", "Position" : "Shipping Manager", "BirthDate" : "1978-01-09", "HireDate" : "2009-08-11", "Email" : "kevinc@dx-email.com", "Address" : "424 N Main St.", "City" : "San Diego", "StateID" : 5, "State" : "California", "HomePhone" : "(213) 555-8038", "Skype" : "kevincDXskype" }, { "ID" : 8, "FirstName" : "Cynthia", "LastName" : "Stanwick", "Phone" : "(818) 555-6655", "Prefix" : "Ms.", "Position" : "HR Assistant", "BirthDate" : "1985-06-05", "HireDate" : "2008-03-24", "Email" : "cindys@dx-email.com", "Address" : "2211 Bonita Dr.", "City" : "Little Rock", "StateID" : 4, "State" : "Arkansas", "HomePhone" : "(818) 555-6808", "Skype" : "cindysDXskype" }, { "ID" : 9, "FirstName" : "Kent", "LastName" : "Samuelson", "Phone" : "(562) 555-9282", "Prefix" : "Dr.", "Position" : "Ombudsman", "BirthDate" : "1972-09-11", "HireDate" : "2009-04-22", "Email" : "kents@dx-email.com", "Address" : "12100 Mora Dr", "City" : "St. Louis", "StateID" : 26, "State" : "Missouri", "HomePhone" : "(562) 555-1328", "Skype" : "kentsDXskype" }, { "ID" : 10, "FirstName" : "Taylor", "LastName" : "Riley", "Phone" : "(310) 555-7276", "Prefix" : "Mr.", "Position" : "Network Admin", "BirthDate" : "1982-08-14", "HireDate" : "2012-04-14", "Email" : "taylorr@dx-email.com", "Address" : "7776 Torreyson Dr", "City" : "San Jose", "StateID" : 5, "State" : "California", "HomePhone" : "(310) 555-9712", "Skype" : "taylorrDXskype" }];