Thank you for your update on this matter, and my apologies for the moderation queue. It looks like it flagged something about your response here – I’m guessing maybe it didn’t like something about the link to GitHub. I noticed you created another forum thread for this issue here: https://ko.infragistics.com/community/forums/f/ignite-ui-for-react/125406/showing-which-columns-have-a-filter-applied-in-their-headers. I will answer your questions here and link the other forum thread here as well.

Regarding the ability to just add a new icon to the header of an IgrDataGrid column, the best thing I can recommend on this is to use the IgrTemplateHeader, but this is an all-or-nothing type of template at the time of writing this. That is, if you re-template the header, you are re-templating the entire content of that header. There does not currently exist the ability to add a single element to the existing header.

Regarding being able to tell if there is a filter applied to a particular column, using e.cellInfo.isFilterRow will not actually help you here. The object returned by e.cellInfo has an inherited API and this property exists for cells that are in the actual filterRow UI if you set the filterUIType property of the grid to FilterUIType.FilterRow. Instead, I would recommend checking the IgrDataGrid.filterExpressions collection for a filter expression containing the column that the IgrTemplateHeader is currently firing its cellUpdating event for.

In the other forum thread linked above, you had also mentioned something relating to the e.renderStandardContent() method. This method is related to the canvas of the IgrDataGrid and is not meant for usage at the time of writing this. It is possible that the inclusion of this method was an oversight.

Looking at other forum threads and internal support cases, it may be worth noting that if you are just trying to add something that signifies that there is a filter applied to a column, we have made the recommendation in the past to change the color of the three dots that open the columns options. This can be configured by setting the columnOptionsIconColor property on the column. You can also set the columnOptionsIconBehavior to make the three dots always visible.

Please let me know if you have any other questions or concerns on this matter.

I saw in "https://github.com/IgniteUI/igniteui-react/issues/5" that this will ne added in a future release.

But I think that we can accomplish this step already right now by manipulating IgrTemplateHeader.

When using IgrTemplateHeader the default rendering of the header is disabled.

Any chance to just add a new icon when the of a filtering of the column itself is set?

I see that the info can be received by calling "e.cellInfo.isFilterRow"

Thanks for help

Andrej

Hello Andrej,

The IgrTemplateHeader works in the same way as the IgrTemplateColumn in that you hook the cellUpdating event and then provide the template in that event handler. You can read about that implementation here: https://ko.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/column-types#template-column.

As for actually using the IgrTemplateHeader, I would recommend that you have it as an external variable so that you can hook the cellUpdating event and bind it to the column’s header property. For example:

public VerticalHeader: IgrTemplateHeader;

constructor(props: any) {
        super(props);
        this.VerticalHeader = new IgrTemplateHeader({});
        this.VerticalHeader.cellUpdating = (s, e) => this.onVerticalHeaderUpdating(s, e);
}

Then, on the column:

<IgrTextColumn field="FieldName" header={this.VerticalHeader}  />

Finally, the “onVerticalHeaderUpdating” event above then looks like the following:

    public onVerticalHeaderUpdating = (s: IgrTemplateHeader, e: IgrTemplateHeaderCellUpdatingEventArgs) => {
        const content = e.content as HTMLDivElement;
        let label: HTMLSpanElement | null = null;
        if (content.childElementCount === 0) {
            content.style.lineHeight = "140px";
            label = document.createElement("div");
            label.style.background = "transparent";
            label.style.color = "rgb(24, 29, 31)";
            label.style.fontSize = "13px";
            label.style.fontFamily = "Verdana";
            label.style.transform = "rotate(270deg)";
            label.style.transformOrigin = "center";
            content.appendChild(label);
        } else {
            label = content.children[0] as HTMLDivElement;
        }

        const info = e.cellInfo as IgrTemplateCellInfo;
        label.textContent = info.value;
    }

This template will provide a vertical header text, and is used in our “type-matrix-table” React example downloadable and individually runnable from our React examples browser here: https://github.com/IgniteUI/igniteui-react-examples/tree/master/samples/grids/data-grid/type-matrix-table.

I hope this helps you. Please let me know if you have any other questions or concerns on this matter.