Merge branch 'vNext' into kdinev-patch-2

Author: Konstantin Dinev

package-lock.json

@@ -62,7 +62,7 @@
     "domino": "^2.1.4",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^13.2.0-beta.0",
+    "igniteui-angular": "^13.2.0-rc.0",
     "igniteui-angular-charts": "^12.1.1",
     "igniteui-angular-core": "^12.1.1",
     "igniteui-angular-i18n": "^12.2.4",
@@ -118,4 +118,4 @@
     "typescript": "4.4.4",
     "webpack-bundle-analyzer": "^4.5.0"
   }
-}
+}

package.json

@@ -12,7 +12,7 @@
             </igx-column>
             <igx-column field="ShipCountry" header="Ship Country" width="200px" [groupable]="true">
             </igx-column>
-            <igx-column field="OrderDate" header="Order Date" width="200px" [groupable]="true">
+            <igx-column field="OrderDate" header="Order Date" width="200px" [groupable]="true" dataType="date">
                 <ng-template igxCell let-value>
                     {{ value | date:'shortDate' }}
                 </ng-template>

src/app/grid/grid-groupby-custom-sample/grid-groupby-custom-sample.component.html

@@ -9,12 +9,16 @@
                 Clear Grouped columns
             </button>
             <igx-grid-toolbar-actions>
-                <igx-select (closed)="grid1.sortingExpressions = []">
-                    <label igxLabel>Select Sorting Type</label>
-                    <igx-select-item (click)="sortingOptions = type.toLocaleLowerCase() ==='single' ? {mode: 'single'} : {mode: 'multiple'}" *ngFor="let type of sortingTypes" [value]="type">
-                        {{type}}
-                    </igx-select-item>
-                </igx-select>
+                <igx-simple-combo #comboItem
+                    [data]="sortingTypes"
+                    [displayKey]="'mode'"
+                    [(ngModel)]="sortingOptions"
+                    (keydown)="handleSearchResults($event)">
+                    <ng-template igxComboClearIcon></ng-template>
+                    <ng-template igxComboItem let-item>
+                        <div>{{ item.mode | uppercase }}</div>
+                    </ng-template>
+                </igx-simple-combo>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>
 

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

@@ -13,8 +13,14 @@ export class SortingSampleComponent implements OnInit {
     @ViewChild('grid1', { read: IgxGridComponent, static: true })
     public grid1: IgxGridComponent;
     public data: any[];
-    public sortingTypes = ['SINGLE', 'MULTIPLE'];
-    public sortingOptions: ISortingOptions = {mode: 'multiple'};
+    public sortingTypes: ISortingOptions[] = [
+        {
+            mode: 'single'
+        }, {
+            mode: 'multiple'
+        }
+    ];
+    public sortingOptions: ISortingOptions = this.sortingTypes[1];
 
     constructor() { }
 
@@ -31,4 +37,8 @@ export class SortingSampleComponent implements OnInit {
     public formatDate(val: Date) {
         return new Intl.DateTimeFormat('en-US').format(val);
     }
+
+    handleSearchResults(event: KeyboardEvent) {
+        event.preventDefault();
+    }
 }

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

@@ -8,7 +8,7 @@ import {
     IgxActionStripModule, IgxAvatarModule, IgxBadgeModule, IgxBannerModule, IgxButtonGroupModule, IgxButtonModule, IgxCardModule,
     IgxCheckboxModule, IgxChipsModule, IgxComboModule,
     IgxDatePickerModule, IgxDialogModule, IgxDividerModule, IgxExpansionPanelModule, IgxFocusModule,
-    IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxListModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule, IgxSelectModule, IgxSliderModule,
+    IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxListModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule, IgxSelectModule, IgxSimpleComboModule, IgxSliderModule,
     IgxSnackbarModule, IgxSwitchModule, IgxTabsModule, IgxToastModule, IgxToggleModule, IgxTooltipModule
 } from 'igniteui-angular';
 import { IgxPreventDocumentScrollModule } from '../directives/prevent-scroll.directive';
@@ -287,7 +287,8 @@ import { GridSummaryTemplateComponent } from './grid-summary-template/grid-summa
         IgxCardModule,
         IgxDividerModule,
         IgxActionStripModule,
-        IgxListModule
+        IgxListModule,
+        IgxSimpleComboModule
     ]
 })
 export class GridsModule { }

src/app/grid/grids.module.ts

@@ -10,12 +10,16 @@
                 Clear Grouped columns
             </button>
             <igx-grid-toolbar-actions>
-                <igx-select (selectionChanging)="treegrid1.sortingExpressions = []">
-                    <label igxLabel>Select Sorting Type</label>
-                    <igx-select-item (click)="sortingOptions = type.toLocaleLowerCase() ==='single' ? {mode: 'single'} : {mode: 'multiple'}" *ngFor="let type of sortingTypes" [value]="type">
-                        {{type}}
-                    </igx-select-item>
-                </igx-select>
+                <igx-simple-combo #comboItem
+                    [data]="sortingTypes"
+                    [displayKey]="'mode'"
+                    [(ngModel)]="sortingOptions"
+                    (keydown)="handleSearchResults($event)">
+                    <ng-template igxComboClearIcon></ng-template>
+                    <ng-template igxComboItem let-item>
+                        <div>{{ item.mode | uppercase }}</div>
+                    </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.html

@@ -16,8 +16,14 @@ export class TreeGridSortingSampleComponent implements OnInit {
     public contextmenuX = 0;
     public contextmenuY = 0;
     public clickedCell = null;
-    public sortingOptions: ISortingOptions = {mode: 'multiple'};
-    public sortingTypes = ['SINGLE', 'MULTIPLE'];
+    public sortingTypes: ISortingOptions[] = [
+        {
+            mode: 'single'
+        }, {
+            mode: 'multiple'
+        }
+    ];
+    public sortingOptions: ISortingOptions = this.sortingTypes[1];
 
     constructor() { }
 
@@ -44,4 +50,8 @@ export class TreeGridSortingSampleComponent implements OnInit {
     public disableContextMenu() {
       this.contextmenu = false;
     }
+
+    handleSearchResults(event: KeyboardEvent) {
+        event.preventDefault();
+    }
 }

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

@@ -16,6 +16,7 @@ import {
     IgxRadioModule,
     IgxRippleModule,
     IgxSelectModule,
+    IgxSimpleComboModule,
     IgxSliderModule,
     IgxSnackbarModule,
     IgxSwitchModule,
@@ -241,7 +242,8 @@ import { TreeGridSummaryTemplateComponent } from './treegrid-summary-template/tr
         IgxBannerModule,
         IgxSnackbarModule,
         IgxTooltipModule,
-        IgxListModule
+        IgxListModule,
+        IgxSimpleComboModule
     ],
     providers: [RemoteFilteringService]
 })