Add Minor Updates

Author: arman-boyakhchyan

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

@@ -35,6 +35,7 @@
                 .ValidationRules(v => v.AddRequired());
             columns.AddFor(m => m.City);
             columns.AddFor(m => m.State)
+                .SortOrder(SortOrder.Asc)
                 .ValidationRules(v => v.AddRequired());
             columns.AddFor(m => m.Email)
                 .Visible(false);
@@ -44,6 +45,7 @@
         .FilterRow(f => f.Visible(true))
         .SearchPanel(s => s.Visible(true))
         .Selection(s => s.Mode(SelectionMode.Single))
+        .Sorting(s => s.Mode(GridSortingMode.Multiple))
         .Editing(e => e
             .Mode(GridEditMode.Popup)
             .AllowAdding(true)

Angular/src/app/app.component.html

@@ -34,7 +34,7 @@
       ></dxi-tree-list-validation-rule>
     </dxi-tree-list-column>
     <dxi-tree-list-column dataField="City"></dxi-tree-list-column>
-    <dxi-tree-list-column dataField="State">
+    <dxi-tree-list-column dataField="State" sortOrder="asc">
       <dxi-tree-list-validation-rule
         type="required"
       ></dxi-tree-list-validation-rule>
@@ -53,6 +53,7 @@
     <dxo-tree-list-filter-row [visible]="true"></dxo-tree-list-filter-row>
     <dxo-tree-list-search-panel [visible]="true"></dxo-tree-list-search-panel>
     <dxo-tree-list-selection mode="single"></dxo-tree-list-selection>
+    <dxo-tree-list-sorting mode="multiple"></dxo-tree-list-sorting>
     <dxo-tree-list-editing
       mode="popup"
       [allowUpdating]="true"

React/src/App.tsx

@@ -15,6 +15,7 @@ import TreeList, {
   RowDragging,
   Paging,
   Scrolling,
+  Sorting,
   type TreeListTypes,
 } from 'devextreme-react/tree-list';
 import Button from 'devextreme-react/button';
@@ -116,7 +117,7 @@ function App(): JSX.Element {
         onOptionChanged={onOptionChanged}
         height={800}
       >
-        <Column dataField="FullName">
+        <Column dataField="FullName" fixed={true}>
           <RequiredRule />
         </Column>
         <Column dataField="Position">
@@ -129,7 +130,7 @@ function App(): JSX.Element {
           <RequiredRule />
         </Column>
         <Column dataField="City" />
-        <Column dataField="State">
+        <Column dataField="State" sortOrder="asc">
           <RequiredRule />
         </Column>
         <Column dataField="Email" visible={false} />
@@ -139,6 +140,7 @@ function App(): JSX.Element {
         <ColumnFixing enabled={true} />
         <ColumnChooser enabled={true} />
         <FilterRow visible={true} />
+        <Sorting mode="multiple" />
         <SearchPanel visible={true} />
         <Editing
           mode="popup"

Vue/src/components/HomeContent.vue

@@ -17,6 +17,7 @@ import DxTreeList, {
   DxRowDragging,
   DxPaging,
   DxScrolling,
+  DxSorting,
   type DxTreeListTypes,
 } from 'devextreme-vue/tree-list';
 import DxButton from 'devextreme-vue/button';
@@ -128,7 +129,7 @@ const toggleExpansion = (): void => {
         <DxRequiredRule/>
       </DxColumn>
       <DxColumn data-field="City"/>
-      <DxColumn data-field="State">
+      <DxColumn data-field="State" sort-order="asc">
         <DxRequiredRule/>
       </DxColumn>
       <DxColumn
@@ -143,6 +144,7 @@ const toggleExpansion = (): void => {
       <DxFilterRow :visible="true"/>
       <DxSearchPanel :visible="true"/>
       <DxSelection mode="single"/>
+      <DxSorting mode="multiple"/>
       <DxEditing
         mode="popup"
         :allow-updating="true"

jQuery/src/index.js

@@ -39,6 +39,7 @@ $(() => {
       }],
     }, 'City', {
       dataField: 'State',
+      sortOrder: 'asc',
       validationRules: [{
         type: 'required',
       }],
@@ -48,6 +49,7 @@ $(() => {
     }, 'MobilePhone', 'Skype'],
     filterRow: { visible: true },
     searchPanel: { visible: true },
+    sorting: { mode: 'multiple' },
     editing: {
       mode: 'popup',
       allowUpdating: true,