refactor(sorting samples): refactor sorting samples

Author: katherinedragieva

src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html

@@ -9,11 +9,14 @@
                 Clear Grouped columns
             </button>
             <igx-grid-toolbar-actions>
-                <igx-simple-combo class="input-container"
+                <igx-simple-combo #comboItem class="sorting-values"
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
-                    [(ngModel)]="sortingTypes[1]"
+                    [(ngModel)]="sortingOptions"
                     (selectionChanging)="handleDropDownSelection($event)">
+                    <ng-template igxComboClearIcon>
+                        <igx-icon></igx-icon>
+                    </ng-template>
                 </igx-simple-combo>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>

src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss

@@ -10,3 +10,8 @@
         justify-content: flex-start;
     }
 }
+
+.sorting-values ::ng-deep .igx-input-group__input,
+::ng-deep .igx-drop-down__item .igx-drop-down__inner {
+    text-transform: uppercase;
+}

src/app/grid/grid-sorting-sample/grid-sorting-sample.component.ts

@@ -13,14 +13,14 @@ export class SortingSampleComponent implements OnInit {
     @ViewChild('grid1', { read: IgxGridComponent, static: true })
     public grid1: IgxGridComponent;
     public data: any[];
-    public sortingOptions: ISortingOptions = {mode: 'multiple'};
-    public sortingTypes = [
+    public sortingTypes: ISortingOptions[] = [
         {
-            mode: "SINGLE"
+            mode: 'single'
         }, {
-            mode: "MULTIPLE"
+            mode: 'multiple'
         }
     ];
+    public sortingOptions: ISortingOptions = this.sortingTypes[1];
 
     constructor() { }
 
@@ -39,6 +39,6 @@ export class SortingSampleComponent implements OnInit {
     }
 
     handleDropDownSelection(event: ISimpleComboSelectionChangingEventArgs) {
-        return this.sortingOptions = event.displayText.toLocaleLowerCase()  === "single" ? {mode: 'single'} : {mode: 'multiple'};
+        this.sortingOptions = event.newSelection;
     }
 }

src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html

@@ -10,11 +10,14 @@
                 Clear Grouped columns
             </button>
             <igx-grid-toolbar-actions>
-                <igx-simple-combo class="input-container"
+                <igx-simple-combo #comboItem class="sorting-values"
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
-                    [(ngModel)]="sortingTypes[1]"
+                    [(ngModel)]="sortingOptions"
                     (selectionChanging)="handleDropDownSelection($event)">
+                    <ng-template igxComboClearIcon>
+                        <igx-icon></igx-icon>
+                    </ng-template>
                 </igx-simple-combo>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>

src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.scss

@@ -10,3 +10,8 @@
         justify-content: flex-start;
     }
 }
+
+.sorting-values ::ng-deep .igx-input-group__input,
+::ng-deep .igx-drop-down__item .igx-drop-down__inner {
+    text-transform: uppercase;
+}

src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.ts

@@ -16,14 +16,14 @@ export class TreeGridSortingSampleComponent implements OnInit {
     public contextmenuX = 0;
     public contextmenuY = 0;
     public clickedCell = null;
-    public sortingOptions: ISortingOptions = {mode: 'multiple'};
-    public sortingTypes = [
+    public sortingTypes: ISortingOptions[] = [
         {
-            mode: "SINGLE"
+            mode: 'single'
         }, {
-            mode: "MULTIPLE"
+            mode: 'multiple'
         }
     ];
+    public sortingOptions: ISortingOptions = this.sortingTypes[1];
 
     constructor() { }
 
@@ -52,6 +52,6 @@ export class TreeGridSortingSampleComponent implements OnInit {
     }
 
     handleDropDownSelection(event: ISimpleComboSelectionChangingEventArgs) {
-        return this.sortingOptions = event.displayText.toLocaleLowerCase()  === "single" ? {mode: 'single'} : {mode: 'multiple'};
+        this.sortingOptions = event.newSelection;
     }
 }