Enable Multiple Sorting

Author: arman-boyakhchyan

ASP.NET Core/Views/Home/Index.cshtml

@@ -36,6 +36,7 @@
             columns.AddFor(m => m.HomePhone);
             columns.AddFor(m => m.PostalCode).Visible(false);
         })
+        .Sorting(s => s.Mode(GridSortingMode.Multiple))
         .FilterRow(f => f.Visible(true))
         .SearchPanel(s => s.Visible(true))
         .GroupPanel(p => p.Visible(true))

Angular/src/app/app.component.html

@@ -30,6 +30,7 @@
     <dxi-column dataField="PostalCode" [visible]="false"></dxi-column>
     <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
     <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+    <dxo-sorting mode="multiple"></dxo-sorting>
     <dxo-filter-row [visible]="true"></dxo-filter-row>
     <dxo-search-panel [visible]="true"></dxo-search-panel>
     <dxo-group-panel [visible]="true"></dxo-group-panel>

React/src/App.tsx

@@ -4,6 +4,7 @@ import DataGrid, {
   ColumnFixing,
   Column,
   RequiredRule,
+  Sorting,
   FilterRow,
   SearchPanel,
   GroupPanel,
@@ -140,6 +141,7 @@ function App(): JSX.Element {
         <Column dataField="HomePhone" />
         <Column dataField="PostalCode" visible={false} />
         <ColumnFixing enabled={true} />
+        <Sorting mode='multiple'/>
         <FilterRow visible={true} />
         <SearchPanel visible={true} />
         <GroupPanel visible={true} />

Vue/src/components/DataGridContent.vue

@@ -49,6 +49,7 @@
       />
       <DxColumnChooser :enabled="true"/>
       <DxColumnFixing :enabled="true"/>
+      <DxSorting mode="multiple"/>
       <DxFilterRow :visible="true"/>
       <DxSearchPanel :visible="true"/>
       <DxGroupPanel :visible="true"/>
@@ -131,7 +132,9 @@ import {
   DxToolbar,
   DxItem,
   DxMasterDetail,
-  DxExport
+  DxExport,
+  DxSorting,
+  type DxDataGridTypes
 } from 'devextreme-vue/data-grid';
 import { DxButton } from 'devextreme-vue/button';
 import { getEmployees, type Employee } from '../employees.service';

jQuery/src/index.js

@@ -68,6 +68,7 @@ $(() => {
           visible: false,
         },
       ],
+      sorting: { mode: 'multiple' },
       filterRow: { visible: true },
       searchPanel: { visible: true },
       groupPanel: { visible: true },