grid autosize sample

Author: tishko0

src/app/grid/grid-column-autosizing/grid-column-autosizing.component.html

@@ -0,0 +1,14 @@
+<div class="grid__wrapper">
+    <igx-grid igxPreventDocumentScroll [data]="data" [autoGenerate]="false" height="500px" width="100%" >
+        <igx-column [field]="'ID'" [header]="'ID'" [resizable]="true" width="auto" ></igx-column>
+        <igx-column [field]="'CompanyName'" [header]="'Company Name'" width="auto" [resizable]="true"></igx-column>
+        <igx-column [field]="'ContactName'" [header]="'Contact Name'" width="auto" [resizable]="true" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
+        <igx-column [field]="'ContactTitle'" [header]="'Contact Title'" width="auto" [resizable]="true"></igx-column>
+        <igx-column [field]="'Address'" [header]="'Address'" width="auto" [resizable]="true"></igx-column>
+        <igx-column [field]="'City'" [header]="'City'" width="auto" [resizable]="true"></igx-column>
+        <igx-column [field]="'Region'" [header]="'Region'" width="auto" [resizable]="true"></igx-column>
+        <igx-column [field]="'PostalCode'" [header]="'Postal Code'" width="auto" [resizable]="true"></igx-column>
+        <igx-column [field]="'Phone'" [header]="'Phone'" width="auto" [resizable]="true"></igx-column>
+        <igx-column [field]="'Fax'" [header]="'Fax'" width="auto" [resizable]="true"></igx-column>
+    </igx-grid>
+</div>

src/app/grid/grid-column-autosizing/grid-column-autosizing.component.scss

@@ -0,0 +1,3 @@
+.grid__wrapper {
+    padding: 16px;
+}

src/app/grid/grid-column-autosizing/grid-column-autosizing.component.ts

@@ -0,0 +1,23 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { DATA } from '../../data/customers';
+
+@Component({
+    selector: 'grid-column-autosizing-sample',
+    styleUrls: ['./grid-column-autosizing.component.scss'],
+    templateUrl: 'grid-column-autosizing.component.html'
+})
+
+export class GridColumnAutosizingComponent {
+    @ViewChild('widthValue', { static: true }) public widthValue: ElementRef;
+
+    public data: any[];
+
+    constructor() {
+        this.data = DATA;
+        }
+
+
+    public autosizeAllColumns(){
+        this.widthValue.nativeElement.value = "auto"
+    }
+}

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

@@ -116,5 +116,6 @@ export const gridsRoutesData = {
     'grid-summary-formatter': { displayName: 'Grid Summary Formatter', parentName: 'Grid' },
     'grid-crud': { displayName: 'Grid CRUD Operations', parentName: 'Grid'},
     'grid-rowClasses-sample': { displayName: 'Grid rowClasses', parentName: 'Grid'},
-    'grid-rowStyles-sample': { displayName: 'Grid rowStyles', parentName: 'Grid'}
+    'grid-rowStyles-sample': { displayName: 'Grid rowStyles', parentName: 'Grid'},
+    'grid-columnAutoResizing-sample': { displayName: 'Grid Column Autoresizing', parentName: 'Grid'}
 };

src/app/grid/grids-routing.module.ts

@@ -122,6 +122,7 @@ import { GridRowClassesComponent } from './grid-rowClasses-sample/grid-rowClasse
 import { GridRowStylesComponent } from './grid-rowStyles-sample/grid-rowStyles.component';
 import { GridSummaryTemplateComponent } from './grid-summary-template/grid-summary-template.component';
 import { GridExcelStyleEditingComponent } from './grid-editing-excel-style/grid-editing-excel-style.component';
+import { GridColumnAutosizingComponent } from './grid-column-autosizing/grid-column-autosizing.component';
 // tslint:enable:max-line-length
 
 export const gridsRoutes: Routes = [
@@ -704,6 +705,11 @@ export const gridsRoutes: Routes = [
         component: GridRowStylesComponent,
         data: gridsRoutesData['grid-rowStyles-sample'],
         path: 'grid-rowStyles-sample'
+    },
+    {
+        component: GridColumnAutosizingComponent,
+        data: gridsRoutesData['grid-columnAutoResizing-sample'],
+        path: 'grid-columnAutoResizing-sample'
     }
 ];
 

src/app/grid/grids.module.ts

@@ -131,6 +131,7 @@ import { GridRowClassesComponent } from './grid-rowClasses-sample/grid-rowClasse
 import { GridRowStylesComponent } from './grid-rowStyles-sample/grid-rowStyles.component';
 import { GridSummaryTemplateComponent } from './grid-summary-template/grid-summary-template.component';
 import { GridExcelStyleEditingComponent } from './grid-editing-excel-style/grid-editing-excel-style.component';
+import { GridColumnAutosizingComponent } from './grid-column-autosizing/grid-column-autosizing.component';
 
 @NgModule({
     declarations: [
@@ -251,7 +252,8 @@ import { GridExcelStyleEditingComponent } from './grid-editing-excel-style/grid-
         GridFormattedFilteringStrategyComponent,
         GridSummaryFormatterComponent,
         GridRowClassesComponent,
-        GridRowStylesComponent
+        GridRowStylesComponent,
+        GridColumnAutosizingComponent
     ],
     imports: [
         CommonModule,