Skip to content

Commit ab98d89

Browse files
tishko0tishko0
committed
Added grid samples for auto resize feature
1 parent c89efcd commit ab98d89

15 files changed

Lines changed: 207 additions & 13 deletions

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1344,6 +1344,16 @@ export class GridConfigGenerator implements IConfigGenerator {
13441344
})
13451345
}));
13461346

1347+
configs.push(new Config({
1348+
component: 'GridColumnAutosizingComponent',
1349+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts'],
1350+
appModuleConfig: new AppModuleConfig({
1351+
imports: [ 'IgxGridModule', 'GridColumnAutosizingComponent', 'IgxPreventDocumentScrollModule'],
1352+
ngDeclarations: ['GridColumnAutosizingComponent'],
1353+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
1354+
})
1355+
}));
1356+
13471357
return configs;
13481358
}
13491359
}

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
250250
shortenComponentPathBy: '/tree-grid/'
251251
}));
252252

253+
//TreeGrid Column Autosizing sample
254+
configs.push(new Config({
255+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts'],
256+
appModuleConfig: new AppModuleConfig({
257+
imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridColumnAutoSizingSampleComponent'],
258+
ngDeclarations: ['TreeGridColumnAutoSizingSampleComponent'],
259+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule']
260+
}),
261+
component: 'TreeGridColumnAutoSizingSampleComponent',
262+
shortenComponentPathBy: '/tree-grid/'
263+
}));
264+
253265
// TreeGrid Column Resizing Line Styling sample
254266
configs.push(new Config({
255267
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts'],
@@ -1075,7 +1087,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
10751087
component: 'TreeGridFormattedFilteringStrategyComponent',
10761088
shortenComponentPathBy: '/tree-grid/'
10771089
}));
1078-
1090+
10791091
configs.push(new Config({
10801092
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/foods.ts'],
10811093
appModuleConfig: new AppModuleConfig({

‎live-editing/configs/app-dv-configs/DVHierarchicalGridConfig.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,21 @@ export class DVHierarchicalGridConfigGenerator implements IConfigGenerator {
2828
component: 'HGridColumnResizingSampleComponent'
2929
}));
3030

31+
configs.push(new Config({
32+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/singersData.ts', '/src/app/hierarchical-grid/models.ts',
33+
'/projects/app-lob/src/_app-layout.scss', '/projects/app-lob/src/_variables.scss', '/src/app/services/remoteValues.service.ts'],
34+
additionalDependencies: ['igniteui-angular-charts', 'igniteui-angular-core'],
35+
appModuleConfig: new AppModuleConfig({
36+
imports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'HGridColumnAutoSizingSampleComponent', 'IgxSparklineCoreModule', 'IgxSparklineModule',
37+
'RemoteValuesService'],
38+
ngDeclarations: ['HGridColumnAutoSizingSampleComponent'],
39+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxSparklineCoreModule', 'IgxSparklineModule'],
40+
ngProviders: ['RemoteValuesService']
41+
}),
42+
component: 'HGridColumnAutoSizingSampleComponent'
43+
}));
44+
45+
3146
return configs;
3247
}
3348
}

‎src/app/hierarchical-grid/hgrid-column-autosizing/hgrid-column-autosizing.component.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div class="grid__wrapper">
2+
<igx-hierarchical-grid igxPreventDocumentScroll class="hierarchicalGrid" [data]="localdata" (columnResized)="onResize($event)" [autoGenerate]="false"
3+
[height]="'480px'" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
4+
<igx-column field="Artist" [resizable]="true"></igx-column>
5+
<igx-column field="Photo" [resizable]="true" [minWidth]="'115px'">
6+
<ng-template igxCell let-cell="cell">
7+
<div class="cell__inner_2">
8+
<img [src]="cell.value" class="photo" />
9+
</div>
10+
</ng-template>
11+
</igx-column>
12+
<igx-column field="Debut" width="auto" [resizable]="true" [minWidth]="'88px'" [maxWidth]="'230px'" dataType="number" [formatter]="formatter"></igx-column>
13+
<igx-column field="GrammyNominations" width="auto" header="Grammy Nominations" [resizable]="true"></igx-column>
14+
<igx-column field="GrammyAwards" width="auto" header="Grammy Awards" [resizable]="true"></igx-column>
15+
<igx-column field="Sales" width="auto" header="Album Sales in last {{ this.years }} years" [width]="'230px'" [filterable]="false" >
16+
<ng-template igxCell let-val>
17+
<igx-sparkline height="40px" width="220px"
18+
[dataSource]="val"
19+
valueMemberPath="Copies"
20+
displayType="Line"
21+
lineThickness="2"
22+
brush="rgb(255,102,0)" >
23+
</igx-sparkline>
24+
</ng-template>
25+
</igx-column>
26+
27+
<igx-row-island [height]="null" [key]="'Albums'" [autoGenerate]="false">
28+
<igx-column field="Album" [resizable]="true"></igx-column>
29+
<igx-column field="LaunchDate" header="Launch Date" [resizable]="true" [dataType]="'date'"></igx-column>
30+
<igx-column field="BillboardReview" header="Billboard Review" [resizable]="true"></igx-column>
31+
<igx-column field="USBillboard200" header="US Billboard 200" [resizable]="true"></igx-column>
32+
<igx-row-island [height]="null" [key]="'Songs'" [autoGenerate]="false">
33+
<igx-column field="Number" header="No." [resizable]="true"></igx-column>
34+
<igx-column field="Title" [resizable]="true"></igx-column>
35+
<igx-column field="Released" dataType="date" [resizable]="true"></igx-column>
36+
<igx-column field="Genre" [resizable]="true"></igx-column>
37+
</igx-row-island>
38+
</igx-row-island>
39+
40+
<igx-row-island [height]="null" [key]="'Tours'" [autoGenerate]="false">
41+
<igx-column field="Tour" [resizable]="true"></igx-column>
42+
<igx-column field="StartedOn" header="Started on" [resizable]="true"></igx-column>
43+
<igx-column field="Location" [resizable]="true"></igx-column>
44+
<igx-column field="Headliner" [resizable]="true"></igx-column>
45+
</igx-row-island>
46+
</igx-hierarchical-grid>
47+
</div>

‎src/app/hierarchical-grid/hgrid-column-autosizing/hgrid-column-autosizing.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.photo {
2+
vertical-align: middle;
3+
max-height: 62px;
4+
}
5+
.cell__inner_2 {
6+
margin: 1px
7+
}
8+
9+
.grid__wrapper{
10+
padding: 16px;
11+
}

‎src/app/hierarchical-grid/hgrid-column-autosizing/hgrid-column-autosizing.component.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component } from '@angular/core';
2+
import { IgxColumnComponent } from 'igniteui-angular';
3+
import { RemoteValuesService } from '../../services/remoteValues.service';
4+
5+
@Component({
6+
selector: 'hierarchical-grid-column-autosizing',
7+
styleUrls: ['./hgrid-column-autosizing.component.scss'],
8+
templateUrl: '/hgrid-column-autosizing.component.html',
9+
providers: [RemoteValuesService]
10+
})
11+
12+
export class HGridColumnAutoSizingSampleComponent {
13+
public years = 10;
14+
public localdata: any[];
15+
public col: IgxColumnComponent;
16+
public pWidth: string;
17+
public nWidth: string;
18+
public singers: any[];
19+
20+
constructor(private remoteValuesService: RemoteValuesService) {
21+
this.singers = this.remoteValuesService.getSingersData();;
22+
for (const singer of this.singers) {
23+
this.getSales(singer);
24+
}
25+
this.localdata = this.singers;
26+
}
27+
28+
public onResize(event) {
29+
this.col = event.column;
30+
this.pWidth = event.prevWidth;
31+
this.nWidth = event.newWidth;
32+
}
33+
34+
public getSales(singer: any): any {
35+
singer['Sales'] = this.getSalesData(10);
36+
}
37+
38+
public getSalesData(years?: number): any[] {
39+
if (years === undefined) {
40+
years = 20;
41+
}
42+
const sales: any[] = [];
43+
for (let y = 0; y < years; y++) {
44+
const value = this.getRandomNumber(0, 1000);
45+
// eslint-disable-next-line @typescript-eslint/naming-convention
46+
sales.push({Copies: value, Year: y});
47+
}
48+
return sales;
49+
}
50+
51+
public getRandomNumber(min: number, max: number): number {
52+
return Math.round(min + Math.random() * (max - min));
53+
}
54+
55+
public formatter = (a) => a;
56+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,6 @@ export const hierarchicalGridRoutesData = {
7979
'hGrid-summary-formatter': { displayName: 'HGrid Summary Formatter', parentName: 'Hierarchical Grid' },
8080
'hGrid-row-classes': { displayName: 'HGrid RowClasses', parentName: 'Hierarchical Grid' },
8181
'hGrid-row-styles': { displayName: 'HGrid RowStyles', parentName: 'Hierarchical Grid' },
82-
'hGrid-action-strip': { displayName: 'HGrid with Action Strip', parentName: 'Hierarchical Grid' }
82+
'hGrid-action-strip': { displayName: 'HGrid with Action Strip', parentName: 'Hierarchical Grid' },
83+
'hGrid-columnAutosizing-sample': { displayName: 'HGrid Column Autosizing Sample', parentName: 'Hierarchical Grid' }
8384
};

‎src/app/hierarchical-grid/hierarchical-grid-routing.module.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ import { HGridRowStylesSampleComponent } from './hgrid-rowStyle-sample/hgrid-row
9696
import { HGridRowClassesSampleComponent } from './hgrid-rowClasses-sample/hgrid-rowClasses.component';
9797
import { HGridActionStripSampleComponent } from './hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample';
9898
import { HGridSummaryTemplateComponent } from './hgrid-summary-template/hgrid-summary-template.component';
99+
import { HGridColumnAutoSizingSampleComponent } from './hgrid-column-autosizing/hgrid-column-autosizing.component';
99100

100101
export const hierarchicalGridRoutes: Routes = [
101102
{
@@ -537,11 +538,11 @@ export const hierarchicalGridRoutes: Routes = [
537538
data: hierarchicalGridRoutesData['hGrid-row-classes'],
538539
path: 'hGrid-row-classes'
539540
},
540-
{
541-
component: HGridActionStripSampleComponent,
542-
data: hierarchicalGridRoutesData['hGrid-action-strip'],
543-
path: 'hGrid-action-strip'
544-
}
541+
{
542+
component: HGridColumnAutoSizingSampleComponent,
543+
data: hierarchicalGridRoutesData['hGrid-columnAutosizing-sample'],
544+
path: 'hGrid-columnAutosizing-sample'
545+
}
545546
];
546547

547548
@NgModule({

‎src/app/hierarchical-grid/hierarchical-grid.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ import { HGridRowStylesSampleComponent } from './hgrid-rowStyle-sample/hgrid-row
9191
import { HGridRowClassesSampleComponent } from './hgrid-rowClasses-sample/hgrid-rowClasses.component';
9292
import { HGridActionStripSampleComponent } from './hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample';
9393
import { HGridSummaryTemplateComponent } from './hgrid-summary-template/hgrid-summary-template.component';
94+
import { HGridColumnAutoSizingSampleComponent } from './hgrid-column-autosizing/hgrid-column-autosizing.component';
9495

9596
@NgModule({
9697
declarations: [
@@ -174,7 +175,8 @@ import { HGridSummaryTemplateComponent } from './hgrid-summary-template/hgrid-su
174175
HierarchicalGridPagerSampleComponent,
175176
HGridRowStylesSampleComponent,
176177
HGridRowClassesSampleComponent,
177-
HGridActionStripSampleComponent
178+
HGridActionStripSampleComponent,
179+
HGridColumnAutoSizingSampleComponent
178180
],
179181
imports: [
180182
CommonModule,

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,6 @@ export const treeGridRoutesData = {
118118
'tree-grid-summary-formatter': { displayName: 'TreeGrid Summary Formatter', parentName: 'TreeGrid' },
119119
'tree-grid-styles-sample': { displayName: 'TreeGrid RowStyles sample', parentName: 'TreeGrid'},
120120
'tree-grid-classes': { displayName: 'TreeGrid RowClasses sample', parentName: 'TreeGrid'},
121-
'tree-grid-action-strip': { displayName: 'TreeGrid with Action Strip', parentName: 'TreeGrid' }
121+
'tree-grid-action-strip': { displayName: 'TreeGrid with Action Strip', parentName: 'TreeGrid' },
122+
'tree-grid-columnAutoSizing-sample': { displayName: 'TreeGrid with Column Autosizing', parentName: 'TreeGrid' }
122123
};

0 commit comments

Comments
 (0)