Column Sizing

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';

import { DikeGridColumnDef, DikeGridDataSourceInput, 
  DikeTextColumnDef 
} from '@dikesoft/angular-data-grid';

import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';

@Component({
  selector: 'column-sizing',
  templateUrl: './column-sizing.component.html',
  styleUrls: ['./column-sizing.component.scss'],
  
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnSizingComponent implements OnInit, OnDestroy {

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  gridProperties: DikeGridProperties;
  
  private columnDef: DikeGridColumnDef<Employee>;
  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
  
  constructor(
    private cdr: ChangeDetectorRef,
    private gridConfig: DikeGridConfig,
    private sampleData: SampleData) { }

  onColumnDefInstance(columnDef: DikeGridColumnDef<Employee>): void {
    // Define the Email column:
    const emailColumn = new DikeTextColumnDef<Employee>('email', 'Email');
    emailColumn.width = 300;
    emailColumn.order = 3;

    // Then, add the colums to the DikeGridComponent instance:
    columnDef.addColumns(emailColumn);
  }

  ngOnInit(): void {
    this.dkgDataSource = this.sampleData.getEmployees(1000);
    
    // Listening to any config property change:
    this.setChangeGridPropertiesSubscription();
  }
  
  ngOnDestroy(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
  }
  
  private setChangeGridPropertiesSubscription(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
    this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
      this.gridProperties = props;
      this.cdr.markForCheck();
    });
  }
}

onColumnDefInstance(columnDef: DikeGridColumnDef<Employee>): void {
  // Define the Email column:
  const emailColumn = new DikeTextColumnDef<Employee>('email', 'Email');
  emailColumn.width = 300;
  emailColumn.order = 3;
  
  // Then, add the colums to the DikeGridComponent instance:
  columnDef.addColumns(emailColumn);
  
  // Define the Age column to be displayed in the right Panel:
  const ageColumn = new DikeTextColumnDef<Employee>('age', 'Age');
  ageColumn.width = 85;
  ageColumn.maxWidth = 150;
  ageColumn.order = 2;
  ageColumn.resizable = true;
  ageColumn.panel = 'rightPanel';
  
  // Add the Age column:
  columnDef.addColumns(ageColumn);
  
  // Grab the DikeGridColumnDef<T> instance:
  this.columnDef = columnDef;
  
  // Once all the columns have been added:
  Promise.resolve().then(() => {
    // Find the Employee Id column:
    const employeeId = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
  
    // Set the initial values in the text boxes:
    if (!!employeeId && isDikeDataColumnDef(employeeId)) {
      this.columnSizingForm.patchValue({
        width: employeeId.width,
        minWidth: employeeId.minWidth,
        maxWidth: employeeId.maxWidth,
        resizable: employeeId.resizable
      });
    }
  });
}

onChangeColumnSize(): void {
  // Search the employeeId column:
  const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');

  if (!!targetColumn && isDikeDataColumnDef(targetColumn)) {
    // If the column is found:
    const width: number = this.columnSizingForm.get('width').value as number;
    const minWidth: number | null = this.columnSizingForm.get('minWidth').value;
    const maxWidth: number | null = this.columnSizingForm.get('maxWidth').value;

    // Change the column size:
    this.columnDef.changeColumnWidth(targetColumn, { width, minWidth, maxWidth });
  }
}

onColumnSizeChange(column: DikeDataColumnDef<Employee, unknown>): void {
  if (column.fieldName === 'employeeId') {
    this.columnSizingForm.patchValue({
      width: column.width,
      minWidth: column.minWidth,
      maxWidth: column.maxWidth
    });
  }
}

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';

import { Subscription } from 'rxjs';

import { DikeDataColumnDef, DikeGridColumnDef, DikeGridDataSourceInput,
  DikeTextColumnDef, isDikeDataColumnDef } from '@dikesoft/angular-data-grid';

import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';

import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';

@Component({
  selector: 'column-sizing',
  templateUrl: './column-sizing.component.html',
  styleUrls: ['./column-sizing.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnSizingComponent implements OnInit, OnDestroy {

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  columnSizingForm: FormGroup;
  gridProperties: DikeGridProperties;

  private columnDef: DikeGridColumnDef<Employee>;
  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;

  constructor(
    private cdr: ChangeDetectorRef,
    private formBuilder: FormBuilder,
    private gridConfig: DikeGridConfig,
    private sampleData: SampleData) { }

  onColumnDefInstance(columnDef: DikeGridColumnDef<Employee>): void {
    // Define the Email column:
    const emailColumn = new DikeTextColumnDef<Employee>('email', 'Email');
    emailColumn.width = 300;
    emailColumn.order = 3;

    // Then, add the colums to the DikeGridComponent instance:
    columnDef.addColumns(emailColumn);

    // Define the Age column to be displayed in the right Panel:
    const ageColumn = new DikeTextColumnDef<Employee>('age', 'Age');
    ageColumn.width = 85;
    ageColumn.maxWidth = 150;
    ageColumn.order = 2;
    ageColumn.resizable = true;
    ageColumn.panel = 'rightPanel';

    // Add the Age column:
    columnDef.addColumns(ageColumn);

    // Grab the DikeGridColumnDef<T> instance:
    this.columnDef = columnDef;

    // Once all the columns have been added:
    Promise.resolve().then(() => {
      // Find the Employee Id column:
      const employeeId = this.columnDef.findColumn(column => column.fieldName === 'employeeId');

      // Set the initial values in the text boxes:
      if (!!employeeId && isDikeDataColumnDef(employeeId)) {
        this.columnSizingForm.patchValue({
          width: employeeId.width,
          minWidth: employeeId.minWidth,
          maxWidth: employeeId.maxWidth,
          resizable: employeeId.resizable
        });
      }
    });
  }

  ngOnInit(): void {
    this.dkgDataSource = this.sampleData.getEmployees(1000);
    // Creating the form that binds the UI ontrols:
    this.columnSizingForm = this.createMainForm();
    // Listening to any config property change:
    this.setChangeGridPropertiesSubscription();
  }

  ngOnDestroy(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
  }

  getControl(formControlName: string): AbstractControl {
    return this.columnSizingForm.get(formControlName);
  }

  onColumnSizeChange(column: DikeDataColumnDef<Employee, string>): void {
    if (column.fieldName === 'employeeId') {
      this.columnSizingForm.patchValue({
        width: column.width,
        minWidth: column.minWidth,
        maxWidth: column.maxWidth
      });
    }
  }

  onResizableChange(value: MatCheckboxChange): void {
    // Search the employeeId column:
    const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');

    if (!!targetColumn) {
      // If the column is found, change its resizable property:
      this.columnDef.setColumnResizable(targetColumn, value.checked);
    }
  }

  onChangeColumnSize(): void {
    // Search the employeeId column:
    const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');

    if (!!targetColumn && isDikeDataColumnDef(targetColumn)) {
      // If the column is found:
      const width: number = this.columnSizingForm.get('width').value as number;
      const minWidth: number | null = this.columnSizingForm.get('minWidth').value;
      const maxWidth: number | null = this.columnSizingForm.get('maxWidth').value;

      // Change the column size:
      this.columnDef.changeColumnWidth(targetColumn, { width, minWidth, maxWidth });
    }
  }

  private createMainForm(): FormGroup {
    const mainForm = this.formBuilder.group({
        resizable: [false]
    });

    const widthControl = new FormControl('',
        [Validators.required, Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
    widthControl.markAllAsTouched();

    const minWidthControl = new FormControl('',
        [Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
    minWidthControl.markAsTouched();

    const maxWidthControl = new FormControl('',
        [Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
    maxWidthControl.markAllAsTouched();

    mainForm.addControl('width', widthControl);
    mainForm.addControl('minWidth', minWidthControl);
    mainForm.addControl('maxWidth', maxWidthControl);

    return mainForm;
  }

  private setChangeGridPropertiesSubscription(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
    this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
      this.gridProperties = props;
      this.cdr.markForCheck();
    });
  }
}