Skip to content

Commit 30fe352

Browse files
zdrawkuzdrawku
authored
Merge pull request #1965 from IgniteUI/keyboard-nav-hgrid
Keyboard nav hGrid sample
2 parents dfa2765 + b0a950e commit 30fe352

19 files changed

+1024
-57
lines changed

‎live-editing/configs/GridConfigGenerator.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1096,9 +1096,9 @@ export class GridConfigGenerator implements IConfigGenerator {
10961096
"/src/app/data/customers.ts"
10971097
],
10981098
appModuleConfig: new AppModuleConfig({
1099-
imports: [GridKeyboardnavGuide, IgxGridModule, IgxListModule, CommonModule, IgxOverlayService],
1099+
imports: [GridKeyboardnavGuide, IgxGridModule, IgxListModule, IgxOverlayService],
11001100
ngDeclarations: [GridKeyboardnavGuide],
1101-
ngImports: [IgxGridModule, IgxListModule, CommonModule],
1101+
ngImports: [IgxGridModule, IgxListModule],
11021102
ngProviders: [IgxOverlayService]
11031103
})
11041104
}));

‎live-editing/configs/HierarchicalGridConfigGenerator.ts

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
// tslint:disable:max-line-length
22
import { HttpClientModule } from "@angular/common/http";
3-
import { IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule, IgxDatePickerModule, IgxDialogModule, IgxDragDropModule, IgxGridModule, IgxHierarchicalGridModule, IgxIconModule, IgxInputGroupModule, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxToastModule, IgxTooltipModule, IgxAvatarModule } from "igniteui-angular";
3+
import { IgxAvatarModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule, IgxDatePickerModule, IgxDialogModule, IgxDragDropModule, IgxGridModule, IgxHierarchicalGridAPIService, IgxHierarchicalGridModule, IgxIconModule, IgxInputGroupModule, IgxListModule, IgxOverlayService, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxToastModule, IgxTooltipModule } from "igniteui-angular";
44
import { IgxPreventDocumentScrollModule } from "../../src/app/directives/prevent-scroll.directive";
5+
import { HierarchicalGridColumnGroupSelectionComponent } from "../../src/app/hierarchical-grid/column-group-selection/hierarchical-grid-column-group-selection.component";
6+
import { HGridColumnSelectionStylesComponent } from "../../src/app/hierarchical-grid/column-selection-styles/hierarchical-grid-column-selection-styles.component";
7+
import { HierarchicalGridColumnSelectionComponent } from "../../src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component";
8+
import { HGridKeyboardnavGuide } from "../../src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component";
59
import { HGridAdvancedFilteringStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component";
610
import { HGridAdvancedFilteringSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.component";
711
import { HGridAllDataSummaryComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component";
@@ -48,6 +52,7 @@ import { HGridDragSampleComponent } from "../../src/app/hierarchical-grid/hierar
4852
import { HGridRowEditStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component";
4953
import { HGridRowEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-editing/hierarchical-grid-row-editing.component";
5054
import { HGridRowReorderComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component";
55+
import { HierarchicalGridRightPinningSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sample-right-pinning/hierarchical-grid-right-pinning.component";
5156
import { HGridSelectionTemplateNumbersSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component";
5257
import { HGridSelectionSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component";
5358
import { HGridSortingStylingComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sorting-styling/hierarchical-grid-sorting-styling.component";
@@ -64,10 +69,6 @@ import { RemoteLoDService } from "../../src/app/hierarchical-grid/services/remot
6469
import { AppModuleConfig } from "./core/AppModuleConfig";
6570
import { Config } from "./core/Config";
6671
import { IConfigGenerator } from "./core/IConfigGenerator";
67-
import { HierarchicalGridRightPinningSampleComponent } from '../../src/app/hierarchical-grid/hierarchical-grid-sample-right-pinning/hierarchical-grid-right-pinning.component';
68-
import { HierarchicalGridColumnSelectionComponent } from '../../src/app/hierarchical-grid/column-selection/hierarchical-grid-column-selection.component';
69-
import { HierarchicalGridColumnGroupSelectionComponent } from '../../src/app/hierarchical-grid/column-group-selection/hierarchical-grid-column-group-selection.component';
70-
import { HGridColumnSelectionStylesComponent } from '../../src/app/hierarchical-grid/column-selection-styles/hierarchical-grid-column-selection-styles.component';
7172

7273
export class HierarchicalGridConfigGenerator implements IConfigGenerator {
7374
public generateConfigs(): Config[] {
@@ -524,7 +525,7 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
524525
}));
525526

526527
configs.push(new Config({
527-
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts",
528+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts",
528529
"/src/app/data/utils.ts",
529530
"/src/app/data/files.data.ts"],
530531
appModuleConfig: new AppModuleConfig({
@@ -607,7 +608,7 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
607608
}));
608609

609610
configs.push(new Config({
610-
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts",
611+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts",
611612
"/src/app/hierarchical-grid/data.ts"
612613
],
613614
appModuleConfig: new AppModuleConfig({
@@ -701,6 +702,19 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
701702
})
702703
}));
703704

705+
configs.push(new Config({
706+
component: HGridKeyboardnavGuide,
707+
additionalFiles: [
708+
"/src/app/hierarchical-grid/data.ts"
709+
],
710+
appModuleConfig: new AppModuleConfig({
711+
imports: [HGridKeyboardnavGuide, IgxHierarchicalGridModule, IgxListModule, IgxOverlayService],
712+
ngDeclarations: [HGridKeyboardnavGuide],
713+
ngImports: [IgxHierarchicalGridModule, IgxListModule],
714+
ngProviders: [IgxOverlayService]
715+
})
716+
}));
717+
704718
return configs;
705719
}
706720
}

‎live-editing/configs/TreeGridConfigGenerator.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// tslint:disable:max-line-length
2-
import { IgxAvatarModule, IgxBadgeModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule, IgxChipsModule, IgxColumnHidingModule, IgxCsvExporterService, IgxDatePickerModule, IgxDialogModule, IgxDragDropModule, IgxExcelExporterService, IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxRadioModule, IgxRippleModule, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxToastModule, IgxTooltipModule, IgxTreeGridModule } from "igniteui-angular";
2+
import { IgxAvatarModule, IgxBadgeModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule, IgxChipsModule, IgxColumnHidingModule, IgxCsvExporterService, IgxDatePickerModule, IgxDialogModule, IgxDragDropModule, IgxExcelExporterService, IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxRadioModule, IgxRippleModule, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxToastModule, IgxTooltipModule, IgxTreeGridModule, IgxOverlayService, IgxListModule } from "igniteui-angular";
33
import { IgxSparklineCoreModule, IgxSparklineModule } from "igniteui-angular-charts";
44
import { IgxPreventDocumentScrollModule } from "../../src/app/directives/prevent-scroll.directive";
55
import { TreeGridColumnGroupSelectionComponent } from "../../src/app/tree-grid/column-group-selection/column-group-selection.component";
@@ -79,6 +79,7 @@ import { TreeGridAllDataSummaryComponent } from "../../src/app/tree-grid/treegri
7979
import { AppModuleConfig } from "./core/AppModuleConfig";
8080
import { Config } from "./core/Config";
8181
import { IConfigGenerator } from "./core/IConfigGenerator";
82+
import { TGridKeyboardnavGuide } from '../../src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component';
8283

8384
export class TreeGridConfigGenerator implements IConfigGenerator {
8485
public generateConfigs(): Config[] {
@@ -934,6 +935,19 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
934935
})
935936
}));
936937

938+
configs.push(new Config({
939+
component: TGridKeyboardnavGuide,
940+
additionalFiles: [
941+
"/src/app/tree-grid/data/employees-flat-detailed.ts"
942+
],
943+
appModuleConfig: new AppModuleConfig({
944+
imports: [TGridKeyboardnavGuide, IgxTreeGridModule, IgxListModule, IgxOverlayService],
945+
ngDeclarations: [TGridKeyboardnavGuide],
946+
ngImports: [IgxTreeGridModule, IgxListModule],
947+
ngProviders: [IgxOverlayService]
948+
})
949+
}));
950+
937951
return configs;
938952
}
939953
}

‎src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="sample">
22
<div class="grid_wrapper">
3-
<igx-grid height="600px" width="100%" [paging]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" displayDensity="compact"
3+
<igx-grid height="450px" width="100%" [paging]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" displayDensity="compact"
44
summaryCalculationMode="rootLevelOnly" columnSelection="single" [showToolbar]="false" [allowAdvancedFiltering]="true">
55
<ng-template igxGridDetail let-dataItem>
66
<div *ngIf="dataItem.CompanysAnnualProfit">

‎src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,41 +14,42 @@ $custom-checkbox-theme: igx-checkbox-theme(
1414
.list-sample {
1515
@include igx-checkbox($custom-checkbox-theme);
1616
}
17+
1718
.sample {
1819
display: flex;
19-
}
20-
21-
.grid_wrapper {
22-
padding-left: 15px;
23-
padding-top: 15px;
24-
width: 75%;
25-
}
26-
27-
.list-sample {
28-
padding-top: 15px;
29-
width: 20%;
3020

31-
.completed {
32-
opacity: .7;
21+
.grid_wrapper {
22+
padding-left: 15px;
23+
padding-top: 15px;
24+
width: 75%;
3325
}
3426

35-
igx-list {
36-
height: 600px;
37-
// overflow-y: scroll;
38-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
39-
0 1px 1px 0 rgba(0, 0, 0, 0.14),
40-
0 2px 1px -1px rgba(0, 0, 0, 0.12);
41-
}
42-
}
43-
44-
.empty-list {
45-
h6 {
46-
padding: 15px;
47-
}
4827

49-
ul {
50-
margin-left: 15px;
51-
font-size: 20px;
52-
font-weight: 400;
28+
.list-sample {
29+
padding-top: 15px;
30+
width: 20%;
31+
32+
.completed {
33+
opacity: .7;
34+
}
35+
36+
igx-list {
37+
height: 450px;
38+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
39+
0 1px 1px 0 rgba(0, 0, 0, 0.14),
40+
0 2px 1px -1px rgba(0, 0, 0, 0.12);
41+
}
42+
43+
.empty-list {
44+
h6 {
45+
padding: 15px;
46+
}
47+
48+
ul {
49+
margin-left: 15px;
50+
font-size: 20px;
51+
font-weight: 400;
52+
}
53+
}
5354
}
5455
}

‎src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.ts

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
IgxGridComponent,
66
IgxListComponent,
77
IgxOverlayService,
8-
IgxPaginatorComponent,
98
SortingDirection
109
} from "igniteui-angular";
1110
import { Subject } from "rxjs";
@@ -123,9 +122,6 @@ export class GridKeyboardnavGuide implements OnInit, OnDestroy {
123122
@ViewChild(IgxListComponent, { static: true})
124123
public listref: IgxListComponent;
125124

126-
@ViewChild(IgxPaginatorComponent, { static: true})
127-
public paginator: IgxPaginatorComponent;
128-
129125
public get keyboardCollection() {
130126
return this._keyboardHandler.collection;
131127
}
@@ -138,12 +134,20 @@ export class GridKeyboardnavGuide implements OnInit, OnDestroy {
138134
@HostListener("keyup.tab", ["$event"])
139135
@HostListener("keyup.shift.tab", ["$event"])
140136
public onTab(evt) {
137+
if (this.grid.crudService.cell) {
138+
return;
139+
}
140+
141141
const gridSection = evt.srcElement.className;
142142
this.changeKeyboardCollection(gridSection);
143143
}
144144

145145
@HostListener("click", ["$event"])
146-
public onClick(evt) {
146+
public onClick() {
147+
if (this.grid.crudService.cell) {
148+
return;
149+
}
150+
147151
const gridSection = document.activeElement.className;
148152
this.changeKeyboardCollection(gridSection);
149153
}
@@ -271,9 +275,11 @@ export class GridKeyboardnavGuide implements OnInit, OnDestroy {
271275
}
272276

273277
public expandChange(evt) {
274-
if (evt) {
275-
this._keyboardHandler.selectItem(3);
278+
if (!this._keyboardHandler.collection.length) {
279+
return;
276280
}
281+
282+
this._keyboardHandler.selectItem(3);
277283
}
278284

279285
public onCheckChange(evt, idx) {

‎src/app/hierarchical-grid/column-group-selection/hierarchical-grid-column-group-selection.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="grid-wrapper">
2-
<igx-hierarchical-grid igxPreventDocumentScroll [data]="data" height="500px" width="100%"
2+
<igx-hierarchical-grid igxPreventDocumentScroll [data]="data" height="500px" width="100%"
33
columnSelection="multiple">
44
<igx-column field="CustomerID"></igx-column>
55
<igx-column-group header="General Information">
@@ -21,7 +21,7 @@
2121
<igx-column field="Fax"></igx-column>
2222
</igx-column-group>
2323
</igx-column-group>
24-
24+
2525
<igx-row-island [key]="'Orders'" [autoGenerate]="false" columnSelection="multi">
2626
<igx-column-group header="Order Information">
2727
<igx-column-group header="Order Details">

‎src/app/hierarchical-grid/hgrid-keybarod-nav-guide-sample/hgrid-keyboard-guide.component.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<div class="sample">
2+
<div class="grid_wrapper">
3+
<igx-hierarchical-grid height="450px" width="100%" [showToolbar]="false" [allowAdvancedFiltering]="true"
4+
columnSelection="multiple" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [paging]="true" displayDensity="compact">
5+
<igx-column field="CustomerID" [filterable]="true" [sortable]="true" [editable]="true"></igx-column>
6+
<igx-column-group header="General Information">
7+
<igx-column field="CompanyName" [sortable]="true"></igx-column>
8+
<igx-column-group header="Personal Details">
9+
<igx-column field="ContactName" [filterable]="true" [hasSummary]="true" [editable]="true"></igx-column>
10+
<igx-column field="ContactTitle" [sortable]="true"></igx-column>
11+
</igx-column-group>
12+
</igx-column-group>
13+
<igx-column-group header="Address Information">
14+
<igx-column-group header="Location" [collapsible]="true" [expanded]="false" (expandedChange)="expandChange($event)">
15+
<igx-column field="FullAddress" header="Full Address" [width]="'250px'" [visibleWhenCollapsed]="true"
16+
[dataType]="'string'" [sortable]="true" [editable]="true"></igx-column>
17+
<igx-column [visibleWhenCollapsed]="false" field="Address" [selectable]="false" [filterable]="true"></igx-column>
18+
<igx-column [visibleWhenCollapsed]="false" field="City" [sortable]="true"></igx-column>
19+
<igx-column [visibleWhenCollapsed]="false" field="PostalCode" [selectable]="false" [filterable]="true" [hasSummary]="true"></igx-column>
20+
<igx-column [visibleWhenCollapsed]="false" field="Country" [selectable]="false"></igx-column>
21+
</igx-column-group>
22+
<igx-column-group header="Contact Information">
23+
<igx-column field="Phone" [filterable]="true"></igx-column>
24+
<igx-column field="Fax"></igx-column>
25+
</igx-column-group>
26+
</igx-column-group>
27+
28+
<igx-row-island [key]="'Orders'" [autoGenerate]="false" columnSelection="multi" (onGridCreated)="onGridCreated($event)"
29+
[showToolbar]="true" [allowAdvancedFiltering]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
30+
<igx-column-group header="Order Information">
31+
<igx-column-group header="Order Details">
32+
<igx-column [editable]="true" [sortable]="true" field="OrderID"></igx-column>
33+
<igx-column [editable]="true" [sortable]="true" field="EmployeeID"></igx-column>
34+
<igx-column [editable]="true" [sortable]="true" field="OrderDate" [dataType]="'date'" [hasSummary]="true"></igx-column>
35+
<igx-column [editable]="true" field="RequiredDate" [dataType]="'date'"></igx-column>
36+
</igx-column-group>
37+
<igx-column-group header="General Shipping Information">
38+
<igx-column field="ShippedDate" [dataType]="'date'"></igx-column>
39+
<igx-column field="ShipVia" [selectable]="false"></igx-column>
40+
<igx-column field="Freight" [selectable]="false"></igx-column>
41+
<igx-column field="ShipName" [hasSummary]="true"></igx-column>
42+
</igx-column-group>
43+
<igx-column-group header="Shipping Location">
44+
<igx-column field="ShipAddress"></igx-column>
45+
<igx-column field="ShipCity"></igx-column>
46+
<igx-column field="ShipPostalCode"></igx-column>
47+
<igx-column field="ShipCountry"></igx-column>
48+
</igx-column-group>
49+
</igx-column-group>
50+
<igx-row-island [key]="'OrderDetails'" [autoGenerate]="false" columnSelection="single" (onGridCreated)="onGridCreated($event)"
51+
[showToolbar]="true" [allowAdvancedFiltering]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
52+
<igx-column [editable]="true" [sortable]="true" field="ProductID" ></igx-column>
53+
<igx-column [editable]="true" [sortable]="true" field="UnitPrice"></igx-column>
54+
<igx-column [editable]="true" [sortable]="true" field="Quantity" [selectable]="false"></igx-column>
55+
<igx-column [editable]="true" field="Discount" [hasSummary]="true"></igx-column>
56+
</igx-row-island>
57+
</igx-row-island>
58+
</igx-hierarchical-grid>
59+
</div>
60+
<div class="list-sample">
61+
<igx-list>
62+
<igx-list-item *ngIf="keyboardCollection.length > 0" isHeader=true>Combinations</igx-list-item>
63+
<igx-list-item @load *ngFor="let c of keyboardCollection; let idx=index" [ngClass]="{'completed': c.completed}" [@toggle]="c.completed ? 'selected' : 'deselected'">
64+
<h4 igxListLineTitle>{{ c.title }}</h4>
65+
<p igxListLineSubTitle>{{ c.subTitle }}</p>
66+
<igx-checkbox [checked]="c.completed" (change)="onCheckChange($event, idx)"></igx-checkbox>
67+
</igx-list-item>
68+
<ng-template igxEmptyList>
69+
<span class="empty-list">
70+
<h5>Use the native navigation of the browser until you reach some of the following grid sections below:</h5>
71+
<ul>
72+
<li>Header</li>
73+
<li>Body</li>
74+
<li>Summary</li>
75+
</ul>
76+
</span>
77+
</ng-template>
78+
</igx-list>
79+
</div>
80+
</div>

0 commit comments

Comments
 (0)