Skip to content

Commit 3e6e326

Browse files
ChronosSFMartin Dragnevdkamburov
authored
all row-pinning samples one pr (#1943)
* Added row pinning sample * fixing lint errors * Adding hierarchical grid row pinning sample * Adding basic tree grid row pinning sample * Changing pinning icon * Adding pinning to all child grids * Changing pinning icons * chore(*): fixing lint * chore(*): fixing samples * chore(*): some additional fixes * chore(*): removing unneccessery styles * chore(*): fixing samples * chore(*): fixing samples * chore(*): improving drag sample * chore(*): adding action-strip base sample * chore(*): adding more samples * chore(*): switch back to proper wrapper * chore(*): additional styling fixes * chore(*): fixing lint * chore(*): Enable rowEditing so it wont throw error when starting the edit * chore(*): finalizing samples for pinning * chore(*): changing implementation based on feedback * switching to igx-grid mixing for samples so that styling works * chore(row-pin): Fix stackblitz sample for hierarchical grid Co-authored-by: Martin Dragnev <[email protected]> Co-authored-by: Deyan Kamburov <[email protected]>
1 parent ba183aa commit 3e6e326

File tree

42 files changed

+1334
-42
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1334
-42
lines changed

‎live-editing/configs/GridConfigGenerator.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ import { PinningStylingComponent } from "../../src/app/grid/grid-sample-pinning-
8383
import { PinningSampleComponent } from "../../src/app/grid/grid-sample-pinning/grid-pinning.component";
8484
import { PinningToolbarSampleComponent } from "../../src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component";
8585
import { RightPinningSampleComponent } from "../../src/app/grid/grid-sample-right-pinning/grid-right-pinning.component";
86+
import { GridRowPinningSampleComponent } from "../../src/app/grid/grid-row-pinning/grid-row-pinning.component";
87+
import { GridRowPinningStylingSampleComponent } from '../../src/app/grid/grid-row-pinning-styling/grid-row-pinning-styling.component';
88+
import { GridRowPinningExtraColumnSampleComponent } from "../../src/app/grid/grid-row-pinning-extra-column/grid-row-pinning-extra-column.component";
89+
import { GridPinningDragSampleComponent } from "../../src/app/grid/grid-row-pinning-drag/grid-row-pinning-drag.component";
8690
import { GridSelectionTemplateExcelComponent } from "../../src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component";
8791
import { GridSelectionTemplateNumbersComponent } from "../../src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component";
8892
import { GridSelectionSampleComponent } from "../../src/app/grid/grid-sample-selection/grid-selection.component";
@@ -1105,6 +1109,50 @@ export class GridConfigGenerator implements IConfigGenerator {
11051109
})
11061110
}));
11071111

1112+
configs.push(new Config({
1113+
component: GridRowPinningSampleComponent,
1114+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/customers.ts"],
1115+
appModuleConfig: new AppModuleConfig({
1116+
imports: [GridRowPinningSampleComponent, IgxActionStripModule, IgxSwitchModule, IgxGridModule, IgxPreventDocumentScrollModule],
1117+
ngDeclarations: [GridRowPinningSampleComponent],
1118+
ngImports: [IgxPreventDocumentScrollModule, IgxActionStripModule, IgxSwitchModule, IgxGridModule],
1119+
ngProviders: []
1120+
})
1121+
}));
1122+
1123+
configs.push(new Config({
1124+
component: GridRowPinningExtraColumnSampleComponent,
1125+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/customers.ts", "/src/app/grid/services/svgIcons.ts"],
1126+
appModuleConfig: new AppModuleConfig({
1127+
imports: [GridRowPinningExtraColumnSampleComponent, IgxSwitchModule, IgxGridModule, IgxIconModule, IgxPreventDocumentScrollModule],
1128+
ngDeclarations: [GridRowPinningExtraColumnSampleComponent],
1129+
ngImports: [IgxPreventDocumentScrollModule, IgxSwitchModule, IgxGridModule, IgxIconModule],
1130+
ngProviders: []
1131+
})
1132+
}));
1133+
1134+
configs.push(new Config({
1135+
component: GridPinningDragSampleComponent,
1136+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/customers.ts"],
1137+
appModuleConfig: new AppModuleConfig({
1138+
imports: [GridPinningDragSampleComponent, IgxActionStripModule, IgxGridModule, IgxPreventDocumentScrollModule],
1139+
ngDeclarations: [GridPinningDragSampleComponent],
1140+
ngImports: [IgxPreventDocumentScrollModule, IgxActionStripModule, IgxGridModule],
1141+
ngProviders: []
1142+
})
1143+
}));
1144+
1145+
configs.push(new Config({
1146+
component: GridRowPinningStylingSampleComponent,
1147+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/customers.ts"],
1148+
appModuleConfig: new AppModuleConfig({
1149+
imports: [GridRowPinningStylingSampleComponent, IgxActionStripModule, IgxGridModule, IgxPreventDocumentScrollModule],
1150+
ngDeclarations: [GridRowPinningStylingSampleComponent],
1151+
ngImports: [IgxPreventDocumentScrollModule, IgxActionStripModule, IgxGridModule],
1152+
ngProviders: []
1153+
})
1154+
}));
1155+
11081156
configs.push(new Config({
11091157
component: GridKeyboardnavGuide,
11101158
additionalFiles: [

‎live-editing/configs/HierarchicalGridConfigGenerator.ts

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// tslint:disable:max-line-length
22
import { HttpClientModule } from "@angular/common/http";
3-
import { IgxAvatarModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule, IgxDatePickerModule, IgxDialogModule, IgxDragDropModule, IgxGridModule, IgxHierarchicalGridAPIService, IgxHierarchicalGridModule, IgxIconModule, IgxInputGroupModule, IgxListModule, IgxOverlayService, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxToastModule, IgxTooltipModule } from "igniteui-angular";
3+
import { IgxActionStripModule, 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";
55
import { HierarchicalGridColumnGroupSelectionComponent } from "../../src/app/hierarchical-grid/column-group-selection/hierarchical-grid-column-group-selection.component";
66
import { HGridColumnSelectionStylesComponent } from "../../src/app/hierarchical-grid/column-selection-styles/hierarchical-grid-column-selection-styles.component";
@@ -18,6 +18,9 @@ import { HGridColumnHidingSampleComponent } from "../../src/app/hierarchical-gri
1818
import { HGridColumnMovingSampleComponentStyled } from "../../src/app/hierarchical-grid/hierarchical-grid-column-moving-styled/hierarchical-grid-moving-styled.component";
1919
import { HGridColumnMovingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-moving/hierarchical-grid-moving.component";
2020
import { HGridPinningSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component";
21+
import { HGridRowPinningExtraColumnSampleComponent } from '../../src/app/hierarchical-grid/hierarchical-grid-row-pinning-extra-column/hierarchical-grid-row-pinning-extra-column.component';
22+
import { HGridRowPinningSampleComponent } from '../../src/app/hierarchical-grid/hierarchical-grid-row-pinning/hierarchical-grid-row-pinning.component';
23+
import { HGridRowPinningStylingSampleComponent } from'../../src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component';
2124
import { HGridToolbarPinningComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component";
2225
import { HGridConditionalRowSelectorsComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component";
2326
import { HGridCustomKBNavigationComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-custom-kb-navigation/hierarchical-grid-custom-kb-navigation-sample.component";
@@ -702,6 +705,39 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
702705
})
703706
}));
704707

708+
configs.push(new Config({
709+
component: HGridRowPinningExtraColumnSampleComponent,
710+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts", "/src/app/grid/services/svgIcons.ts"],
711+
appModuleConfig: new AppModuleConfig({
712+
imports: [HGridRowPinningExtraColumnSampleComponent, IgxHierarchicalGridModule, IgxIconModule, IgxPreventDocumentScrollModule],
713+
ngDeclarations: [HGridRowPinningExtraColumnSampleComponent],
714+
ngImports: [IgxPreventDocumentScrollModule, IgxHierarchicalGridModule, IgxIconModule, IgxSwitchModule],
715+
ngProviders: []
716+
})
717+
}));
718+
719+
configs.push(new Config({
720+
component: HGridRowPinningSampleComponent,
721+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts", "/src/app/grid/services/svgIcons.ts"],
722+
appModuleConfig: new AppModuleConfig({
723+
imports: [HGridRowPinningSampleComponent, IgxHierarchicalGridModule, IgxActionStripModule, IgxPreventDocumentScrollModule],
724+
ngDeclarations: [HGridRowPinningSampleComponent],
725+
ngImports: [IgxPreventDocumentScrollModule, IgxActionStripModule, IgxHierarchicalGridModule, IgxSwitchModule],
726+
ngProviders: []
727+
})
728+
}));
729+
730+
configs.push(new Config({
731+
component: HGridRowPinningStylingSampleComponent,
732+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts", "/src/app/grid/services/svgIcons.ts"],
733+
appModuleConfig: new AppModuleConfig({
734+
imports: [HGridRowPinningStylingSampleComponent, IgxHierarchicalGridModule, IgxActionStripModule, IgxPreventDocumentScrollModule],
735+
ngDeclarations: [HGridRowPinningStylingSampleComponent],
736+
ngImports: [IgxPreventDocumentScrollModule, IgxActionStripModule, IgxHierarchicalGridModule],
737+
ngProviders: []
738+
})
739+
}));
740+
705741
configs.push(new Config({
706742
component: HGridKeyboardnavGuide,
707743
additionalFiles: [

‎live-editing/configs/TreeGridConfigGenerator.ts

Lines changed: 37 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, IgxOverlayService, IgxListModule } from "igniteui-angular";
2+
import { IgxActionStripModule, 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";
@@ -19,6 +19,9 @@ import { TreeGridColumnMovingSampleComponent } from "../../src/app/tree-grid/tre
1919
import { TreeGridColumnMovingStyledSampleComponent } from "../../src/app/tree-grid/tree-grid-column-moving-styled-sample/tree-grid-column-moving-styled-sample.component";
2020
import { TreeGridColumnPinningSampleComponent } from "../../src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-column-pinning-sample.component";
2121
import { TreeGridPinningToolbarSampleComponent } from "../../src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-toolbar-pinning.component";
22+
import { TreeGridRowPinningExtraColumnSampleComponent } from "../../src/app/tree-grid/tree-grid-row-pinning-extra-column/tree-grid-row-pinning-extra-column.component";
23+
import { TreeGridRowPinningSampleComponent } from "../../src/app/tree-grid/tree-grid-row-pinning/tree-grid-row-pinning.component";
24+
import { TreeGridRowPinningStylingSampleComponent } from "../../src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component";
2225
import { TreeGridColumnResizingSampleComponent } from "../../src/app/tree-grid/tree-grid-column-resizing-sample/tree-grid-column-resizing-sample.component";
2326
// tslint:disable-next-line: ordered-imports
2427
import { TreeGridConditionalCellStyle2Component } from "../../src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component";
@@ -935,6 +938,39 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
935938
})
936939
}));
937940

941+
configs.push(new Config({
942+
component: TreeGridRowPinningSampleComponent,
943+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/tree-grid/data/employees-flat.ts"],
944+
appModuleConfig: new AppModuleConfig({
945+
imports: [TreeGridRowPinningSampleComponent, IgxActionStripModule, IgxSwitchModule, IgxTreeGridModule, IgxPreventDocumentScrollModule],
946+
ngDeclarations: [TreeGridRowPinningSampleComponent],
947+
ngImports: [IgxPreventDocumentScrollModule, IgxActionStripModule, IgxSwitchModule, IgxTreeGridModule],
948+
ngProviders: []
949+
})
950+
}));
951+
952+
configs.push(new Config({
953+
component: TreeGridRowPinningExtraColumnSampleComponent,
954+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/tree-grid/data/employees-flat.ts", "/src/app/grid/services/svgIcons.ts"],
955+
appModuleConfig: new AppModuleConfig({
956+
imports: [TreeGridRowPinningExtraColumnSampleComponent, IgxTreeGridModule, IgxSwitchModule, IgxIconModule, IgxPreventDocumentScrollModule],
957+
ngDeclarations: [TreeGridRowPinningExtraColumnSampleComponent],
958+
ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxSwitchModule, IgxIconModule],
959+
ngProviders: []
960+
})
961+
}));
962+
963+
configs.push(new Config({
964+
component: TreeGridRowPinningStylingSampleComponent,
965+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/tree-grid/data/employees-flat.ts"],
966+
appModuleConfig: new AppModuleConfig({
967+
imports: [TreeGridRowPinningStylingSampleComponent, IgxActionStripModule, IgxTreeGridModule, IgxPreventDocumentScrollModule],
968+
ngDeclarations: [TreeGridRowPinningStylingSampleComponent],
969+
ngImports: [IgxPreventDocumentScrollModule, IgxActionStripModule, IgxTreeGridModule],
970+
ngProviders: []
971+
})
972+
}));
973+
938974
configs.push(new Config({
939975
component: TGridKeyboardnavGuide,
940976
additionalFiles: [

‎src/app/grid/grid-routes-data.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ export const gridsRoutesData = {
3434
"grid-pinning-styling": { displayName: "Grid Pinning Styling", parentName: "Grid" },
3535
"grid-resizing-sample": { displayName: "Grid Resizing", parentName: "Grid" },
3636
"grid-resize-line-styling-sample": { displayName: "Grid Resize Line Styling", parentName: "Grid" },
37+
"grid-row-pinning": { displayName: "Grid Row Pinning", parentName: "Grid" },
38+
"grid-row-pinning-extra-column": { displayName: "Grid Row Pinning Custom UI", parentName: "Grid" },
3739
"grid-row-pinning-drag": { displayName: "Grid Row Pinning Drag/Drop", parentName: "Grid" },
40+
"grid-row-pinning-styling": { displayName: "Grid Row Pinning Styling", parentName: "Grid" },
3841
"grid-sample-2": { displayName: "Grid Financial Sample", parentName: "Grid" },
3942
"grid-sample-pinning": { displayName: "Grid Header Template with Pinning", parentName: "Grid" },
4043
"grid-sample-toolbar-pinning": { displayName: "Grid Toolbar Pinning", parentName: "Grid" },
@@ -86,9 +89,9 @@ export const gridsRoutesData = {
8689
"grid-excel-style-filtering-load-on-demand":
8790
{ displayName: "Grid Excel Style Filtering Load On Demand", parentName: "Grid" },
8891
"grid-conditional-row-selectors": { displayName: "Grid Conditional Row Selectors", parentName: "Grid" },
89-
"grid-multiple-row-drag": { displayName: "Grid Multi Row Drag", parentName: "Grid"},
90-
"grid-collapsible-groups": { displayName: "Grid Collapsible Column Groups", parentName: "Grid"},
91-
"grid-alldata-summaries": {displayName: "Grid AllData Summaries", parentName: "Grid"},
92+
"grid-multiple-row-drag": { displayName: "Grid Multi Row Drag", parentName: "Grid" },
93+
"grid-collapsible-groups": { displayName: "Grid Collapsible Column Groups", parentName: "Grid" },
94+
"grid-alldata-summaries": { displayName: "Grid AllData Summaries", parentName: "Grid" },
9295
"grid-sample-right-pinning": { displayName: "Right Pinning", parentName: "Grid" },
9396
"column-selection": { displayName: "Column Selection", parentName: "Grid" },
9497
"column-group-selection": { displayName: "Column Group Selection", parentName: "Grid" },

‎src/app/grid/grid-row-pinning-drag/grid-row-pinning-drag.component.html

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
<div class="grid-container">
2-
<igx-grid igxPreventDocumentScroll #grid [data]="data" [pinning]='pinningConfig' [height]="'800px'" [width]="'1000px'" [autoGenerate]="false" [rowDraggable]="true"
3-
[primaryKey]="'ID'" igxDrop (dropped)="onDropAllowed($event)">
4-
<igx-column width='70px' [filterable]='false'>
5-
<ng-template igxCell let-cell="cell" let-val>
6-
<igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
7-
{{cell.row.pinned ? 'lock' : 'lock_open'}}
8-
</igx-icon>
9-
</ng-template>
10-
</igx-column>
11-
<igx-column [field]="'ID'" [header]="'ID'" width="100px"></igx-column>
12-
<igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px"></igx-column>
13-
<igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [minWidth]="'60px'"
14-
[maxWidth]="'230px'"></igx-column>
15-
<igx-column [field]="'ContactTitle'" [header]="'Contact Title'" width="100px"></igx-column>
16-
<igx-column [field]="'Address'" [header]="'Address'" width="100px"></igx-column>
17-
<igx-column [field]="'City'" [header]="'City'" width="100px"></igx-column>
18-
<igx-column [field]="'Region'" [header]="'Region'" width="100px"></igx-column>
19-
<igx-column [field]="'PostalCode'" [header]="'Postal Code'" width="100px"></igx-column>
20-
<igx-column [field]="'Phone'" [header]="'Phone'" width="100px"></igx-column>
21-
<igx-column [field]="'Fax'" [header]="'Fax'" width="100px"></igx-column>
2+
<igx-grid igxPreventDocumentScroll #grid1 [data]="data" [pinning]='pinningConfig' [height]="'490px'" [width]="'100%'"
3+
[autoGenerate]="false" [rowDraggable]="true" [primaryKey]="'ID'" [cellSelection]="false" igxDrop
4+
(onRowDragStart)="onRowDragStart($event)" (dropped)="onDropAllowed($event)"
5+
(mouseover)="onMouseOver(actionStrip1, grid1, $event)" (onCellClick)="onCellClick($event)"
6+
(mouseleave)="onMouseLeave(actionStrip1, $event)">
7+
<igx-column [field]="'CompanyName'" [header]="'Company Name'"></igx-column>
8+
<igx-column [field]="'ContactName'" [header]="'Contact Name'"></igx-column>
9+
<igx-column [field]="'ContactTitle'" [header]="'Contact Title'"></igx-column>
10+
<igx-column [field]="'Address'" [header]="'Address'"></igx-column>
11+
<igx-column [field]="'City'" [header]="'City'"></igx-column>
12+
<igx-column [field]="'PostalCode'" [header]="'Postal Code'"></igx-column>
13+
<igx-column [field]="'Phone'" [header]="'Phone'"></igx-column>
14+
<igx-column [field]="'Fax'" [header]="'Fax'"></igx-column>
15+
16+
<igx-action-strip #actionStrip1>
17+
<igx-grid-pinning-actions></igx-grid-pinning-actions>
18+
</igx-action-strip>
2219
</igx-grid>
2320
</div>

0 commit comments

Comments
 (0)