Hello,

I have been looking into your question and to customize the igx-grid column headers and display an icon instead of the default ellipsis (...), you can implement the following steps. This will allow users to click the icon to open a dialog displaying the full text of the column header.

Steps to Customize igx-grid Column Headers

1. Define the Grid with a Custom Header Template:
   • Use the igxHeader template to customize the header of a specific column.
   • Display the first part of the header text and an icon that will open a dialog when clicked.
2. Implement the Dialog for Full Text Display:
   • Use the IgxDialogComponent from Ignite UI to create a dialog that shows the full header text when the icon is clicked.

<ng-template igxHeader let-column>
        <div class="header-content">
          <!-- Display first two words and an icon for longer headers -->
          <span *ngIf="column.header.length > maxLength">
            {{ getFirstTwoWords(column.header) }}
            <igx-icon family="material" (click)="openDialog(column.header)">more</igx-icon>
          </span>
          <!-- Display full header if it's short enough -->
          <span *ngIf="column.header.length <= maxLength">{{ column.header }}</span>
        </div>
</ng-template>

<!-- Dialog to show full header text -->
<igx-dialog #dialog>
  <igx-dialog-title>Full Header Text</igx-dialog-title>
  <div>{{ fullText }}</div>
  <igx-dialog-actions>
    <button igxButton="contained" (click)="closeDialog()">Close</button>
  </igx-dialog-actions>
</igx-dialog>

@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;

  public data: any[];
  public maxLength = 10; // Maximum length for header text before truncation
  public fullText = '';

  constructor() {}

  ngOnInit() {
    // Initialize data
    this.data = DATA;
  }

  // Method to get the first two words of a string
  public getFirstTwoWords(text: string): string {
    return text.split(' ').slice(0, 2).join(' ');
  }

  // Method to open the dialog with the full header text
  public openDialog(text: string) {
    this.fullText = text;
    this.dialog.open();
  }

  // Method to close the dialog
  public closeDialog() {
    this.dialog.close();
  }

Key Points

1. Custom Header Template:
   • Uses ng-template igxHeader to define a custom template for the column header.
   • Checks if the header length exceeds maxLength. If it does, it displays the first two words and an icon.
   • If the header is within the maxLength, it displays the full header text.
2. Icon and Dialog:
   • The icon is an igx-icon with a click event bound to the openDialog method.
   • openDialog sets the full header text to a variable (fullText) and opens the dialog.
   • The dialog shows the full header text and includes a close button that triggers closeDialog to close the dialog.

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

<ng-template igxCell let-cell="cell">
        <div class="cell-content">
          <!-- Display first two words and an icon for longer cell texts -->
          <span *ngIf="cell.value.length > maxLength">
            {{ getFirstTwoWords(cell.value) }}
            <igx-icon family="material" (click)="openDialog(cell.value)">more</igx-icon>
          </span>
          <!-- Display full cell text if it's short enough -->
          <span *ngIf="cell.value.length <= maxLength">{{ cell.value }}</span>
        </div>
      </ng-template>

<igx-dialog #dialog>
  <igx-dialog-title>Full Text</igx-dialog-title>
  <div>{{ fullText }}</div>
  <igx-dialog-actions>
    <button igxButton="contained" (click)="closeDialog()">Close</button>
  </igx-dialog-actions>
</igx-dialog>

@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;

  public data: any[];
  public maxLength = 10; // Maximum length for header text before truncation
  public fullText = '';

  constructor() {}

  ngOnInit() {
    // Initialize data
    this.data = DATA;
  }

  // Method to get the first two words of a string
  public getFirstTwoWords(text: string): string {
    return text.split(' ').slice(0, 2).join(' ');
  }

  // Method to open the dialog with the full header text
  public openDialog(text: string) {
    this.fullText = text;
    this.dialog.open();
  }

  // Method to close the dialog
  public closeDialog() {
    this.dialog.close();
  }

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics