0

I have a problem with the automatic resizing of the column header and the group column in case we have a very long string. Are there any options in slickgrid that would allow to resize the grid headers to display the entire column headers ?

import { Component, OnInit } from '@angular/core';
import { Column, GridOption, AngularGridInstance } from 'angular-slickgrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'ngSlickGrid';

  angularGrid: AngularGridInstance;
  columnDefinitions: Column[] = [];
  gridOptions: GridOption = {};
  dataset: any[] = [];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'title', name: 'Long Title Title Title Title Title Title Title Title Title', field: 'title', sortable: true, columnGroup: "Long label multi header test test test test test test test" },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, columnGroup: "test 1" },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, columnGroup: "test 2" },
      { id: 'start', name: 'Start', field: 'start', columnGroup: "test 2" },
      { id: 'finish', name: 'Finish', field: 'finish' },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
    ];
    this.gridOptions = {
      enableCellNavigation: true,
      showPreHeaderPanel: true,
      createPreHeaderPanel: true,
      preHeaderPanelHeight: 35
    };

    this.dataset = [];
    for (let i = 0; i < 1000; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 28));
      const randomPercent = Math.round(Math.random() * 100);

      this.dataset[i] = {
        id: i, // again VERY IMPORTANT to fill the "id" with unique values
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: `${randomMonth}/${randomDay}/${randomYear}`,
        finish: `${randomMonth}/${randomDay}/${randomYear}`,
        effortDriven: (i % 5 === 0)
      };
    }
  }
}
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Hitaway
  • 3
  • 1
  • you could always use the ```width``` property of the column – Ben McIntyre Dec 23 '20 at 12:21
  • My problem is with the height and not the length of the field – Hitaway Dec 23 '20 at 14:16
  • There's no auto-width of any kind in Angular-Slickgrid, there's however the auto-size content that 6pac (Ben) worked on which you can see in this [Wiki](https://github.com/6pac/SlickGrid/wiki/Auto-Column-Sizing) but note that Angular-Slickgrid uses the legacy Slickgrid autosize columns which is to try to find best column width by available viewport size and minWidth/maxWidth defined in the column definitions. The auto-size by content might a good alternative to look into but there's a bit of a perf hit because it needs to loop through all records, hence why I still use the legacy one. – ghiscoding Dec 24 '20 at 05:12
  • are you saying you want to wrap the header text? – Ben McIntyre Dec 26 '20 at 07:30

0 Answers0