Yes, you can customize the Angular igx-grid to show an icon instead of the default ellipsis (...) and display the full text in a dialogue or overlay when the icon is clicked. To achieve this, you must create a custom cell template for the grid column and use Angular's material dialogue or an overlay component. Here’s a high-level approach:

1. Create a Custom Cell Template: Define a custom cell template for the columns where you want to show the icon.

2. Add the Icon: Use an icon (e.g., a magnifying glass or info icon) in the custom cell template.

3. Implement the Click Event: Attach a click event to the icon that opens a dialogue or overlay containing the full text.

4. Use Angular Material Dialog: Use Angular Material’s MatDialog to create a dialogue that displays the full text.

Here’s a simplified example:

<igx-column field="yourField">
  <ng-template igxCell let-cell="cell">
    <div>
      <span>{{ cell.value | slice:0:20 }}</span>
      <mat-icon (click)="openDialog(cell.value)">info</mat-icon>
    </div>
  </ng-template>
</igx-column>

In your component:

import { MatDialog } from '@angular/material/dialog';
import { Component } from '@angular/core';

@Component({
  // Component metadata
})
export class YourComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(value: string): void {
    this.dialog.open(DialogContentComponent, {
      data: { fullText: value }
    });
  }
}

Create a separate component for the dialogue content:

import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';

@Component({
  selector: 'dialog-content',
  template: '<p>{{ data.fullText }}</p>',
})
export class DialogContentComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { fullText: string }) {}
}

This setup allows you to replace the ellipsis with an icon that opens a dialogue displaying the full text, giving users the flexibility to read it easily.

Here is a bonus for developers like you. This is a modern Instagram just like GB whatsapp to normal Whatsapp, this is the Instander to normal Instagram. This APK has many more features and customizable developer options that allow you to create your own features of interest on Instagram. 

<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

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