Feature Request: Template and Customize Cell Validation Indicator

[Jennygra]

Currently, 'igxCellValidationError' allows us to customize the validation message, but not the validation indicator itself.

It would be valuable to expose a template for the cell validation indicator/icon, similar to how the validation message can be templated. This would allow developers to fully customize the UI and behavior while still leveraging the grid's validation state.

Example use cases:

• Replace the default validation icon with a custom icon.
• Use a custom tooltip implementation instead of the built-in one.
• Control when the validation tooltip is shown (for example, only on hover).
• Display validation information in a custom overlay, popover, or dialog.

Something along the lines of:

<ng-template igxCellValidationIndicator let-cell="cell">
    <!-- Custom icon and tooltip logic -->
</ng-template>

This would give developers full control over the presentation and interaction model while still providing access to the cell validation state.

If there is already a supported way to customize the validation indicator or tooltip behavior beyond CSS styling, please let me know.

[RivaIvanova]

Hi @Jennygra,

I have been looking into your suggestion, and below are my answers as well as clarification questions for the example use cases.

• Replace the default validation icon with a custom icon.
  Changing the default error icon can be achieved via the IgxIconService and its option to change the internal icons by reference. More information can be found in the Icon Service Internal Usage section here.

private iconService = inject(IgxIconService);

public ngOnInit(): void {
    this.iconService.setIconRef('error', 'default', {
        name: 'favorite',
        family: 'material',
    })
}

• Use a custom tooltip implementation instead of the built-in one.
  Could you please clarify what type of custom implementation you refer to? Is this related to the next use case, "Control when the validation tooltip is shown (for example, only on hover)"? Currently, the tooltip behavior is not customizable. It is displayed (1) when the validation is triggered (based on the validationTrigger option, which is by default change and can be set to blur), (2) when the cell is active/focused, or (3) when hovering over the error indicator (the default tooltip behavior). So, this seems like a good candidate for logging as a feature request.

• Display validation information in a custom overlay, popover, or dialog.
  While the IgxTooltip itself is intended for small, informative messages, it allows setting and styling any kind of content inside it, similar to the dialog. Are there any specific scenarios that require using a custom overlay/dialog? Should the message be positioned in a specific location on the page and not below/above the error indicator?

<igx-column field="UnitPrice" required min="0" max="100" [editable]="true">
    <ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
        @if (cell.validation?.errors?.['required']) {
            <igx-card>
                <igx-card-header>
                    <igx-avatar>
                        <igx-icon family="material" name="star"></igx-icon>
                    </igx-avatar>
                    <h3 igxCardHeaderTitle>18° Partly Cloudy</h3>
                    <h6 igxCardHeaderSubtitle>Current Weather</h6>
                </igx-card-header>
            </igx-card>
        } @else {
            <ng-container *ngTemplateOutlet="defaultErr">
            </ng-container>
        }
    </ng-template>
</igx-column>

igx-avatar {
    z-index: 1;
    --ig-size: var(--ig-size-medium);
    --background: hsla(var(--ig-secondary-500), 6%);
    border: 1px solid var(--ig-secondary-500);
    border-radius: 4px;

    igx-icon {
        --size: 48px;
        color: var(--ig-secondary-500);
    }
}

To further investigate this matter and determine what part can be achieved with the currently available functionality and what part can be considered a feature request, please answer the above questions and provide any additional details that you consider relevant. Understanding the exact requirements, expected behavior, and the problems you're trying to solve will allow us to better assess how, and if, such functionality could be implemented.

[Jennygra]

Hi @RivaIvanova,

The suggestion to "use a custom tooltip implementation instead of the built-in one" is directly related to our request to control when the validation tooltip is shown.

Our main use case is that we want to keep the existing validation behavior and invalid state handling, but we do not want the validation tooltip to be displayed automatically whenever a cell becomes invalid. Instead, we would like the tooltip to be shown only when the user hovers over the validation/error icon.

The request for additional templating capabilities was more of a broader suggestion, as it could enable further customization scenarios for other developers. However, our primary requirement is simply to control the tooltip visibility behavior.

In short, we would like the validation indicator to remain visible when a cell is invalid, but the validation tooltip should only appear on hover. Currently, the tooltip remains visible as long as the cell is in an invalid state.

[RivaIvanova]

Hi @Jennygra,

Thank you for the detailed clarification! Based on your explanation, I have created a feature request from our discussion regarding the validation tooltip display behavior. Our development team will review and further examine this request.

#17345

Any concerns or questions you may have can be directly addressed in the issue, which gives you the opportunity to communicate with the development team and receive updates whenever new information becomes available. To stay informed, please make sure you are subscribed to the issue using the “Subscribe” button.

Additionally, feel free to log any future findings or behaviors related to our product in the repository’s issues section, as this helps ensure better tracking and visibility.