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.
Apply
Reset
<dx-data-grid id="gridContainer" [dataSource]="employees"> <dxo-sorting mode="multiple"></dxo-sorting> <dxi-column dataField="Prefix" caption="Title" [width]="70"></dxi-column> <dxi-column dataField="FirstName" sortOrder="asc"></dxi-column> <dxi-column dataField="LastName" sortOrder="asc"></dxi-column> <dxi-column dataField="City"></dxi-column> <dxi-column dataField="State"></dxi-column> <dxi-column dataField="Position" [width]="130" [allowSorting]="!positionDisableSorting"></dxi-column> <dxi-column dataField="HireDate" dataType="date"></dxi-column> </dx-data-grid> <div class="options"> <dx-check-box [(value)]="positionDisableSorting" (onValueChanged)="onValueChange($event)" text="Disable Sorting for the Position Column"> </dx-check-box> </div>
import { NgModule, Component, ViewChild } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridComponent, DxDataGridModule, DxCheckBoxModule } from 'devextreme-angular'; import { Employee, Service } from './app.service'; @Component({ selector: 'demo-app', providers: [ Service ], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent; employees: Employee[]; positionDisableSorting = false; constructor(service: Service) { this.employees = service.getEmployees(); } onValueChange(e){ if(e.value) { this.dataGrid.instance.columnOption(5, "sortOrder", undefined); } } } @NgModule({ imports: [ BrowserModule, DxDataGridModule, DxCheckBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ .options > .dx-widget { margin-top: 30px; }
import { Injectable } from '@angular/core'; export class Employee { ID: number; FirstName: string; LastName: string; Prefix: string; Position: string; Picture: string; BirthDate: string; HireDate: string; Notes: string; Address: string; State: string; City: string; } let employees: Employee[] = [{ "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" }]; @Injectable() export class Service { getEmployees() : Employee[] { return employees; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular 2 and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js', 'typescript': 'npm:typescript@2.0.6/lib/typescript.js', '@angular/core': 'npm:@angular/core@2.4.3/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@2.4.3/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@2.4.3/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.3/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.3/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@2.4.3/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@3.4.3/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@2.4.3/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.0.3', 'devextreme': 'npm:devextreme@16.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@16.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>