Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Is it possible to modify the "template" of columnKey label for igGridGroupBy columnSettings summaries ?


Sorry, this is my second request of the day. I had two questions and I wanted to separate them from each other.

Here's the explanation. I am currently using your ui.igGridGroupBy component to display summaries after the title and count of my rows in the grid within the context of grouped rows.

Currently, my formatting looks like this:

However, I would like to add a delimiter between each columnSettings summary. Currently, I am using a single summary per column, which results in an architecture that looks something like this:


//Creation of grid
// ...
name: "GroupBy" //feature GroupBy creation
// ...
columnSettings: [
                columnKey: col1.key,
                summaries: [
                        summaryFunction: "max",
                        label: "Max",
                        text: `Max ${col1.key} : `,
                    columnKey: col2.key,
                    summaries: [
                            summaryFunction: "min",
                            label: "Min",
                            text: `Min ${col2.key} : `,
// ...

In the end, I would like to achieve a result like this:

Here, I would like to add a delimiter (" / "). I should note that multiSummaryDelimiter did not work because it applies to multiple summaries within the same columnSettings.

Initially, I thought of simply adding a " / " before the column name in the grouping, but I couldn't find a property to do so. It seems that all the grouping text is directly placed within the td tag without much possibility of separating the elements inside (to include HTML spans, for example).

The html architecture looks something like this:

<!-- Render in HTML debugger -->
<td data-gbsummary="true" colspan="7" tabindex="0" class="">
    Brouillon (50)- Niv. Escalade Max: 1 UO consommées Avg : 0

I have already managed to "change the template" with groupedRowTextTemplate, but it only affects the text at the beginning and not the grouping that comes after.

Do you have a solution to suggest?

Additionally, in my example, is it also possible to put "Max" before the grouped column name? (e.g., Max Niv Escal. instead of Niv Escal. Max)

Thank you in advance.


  • 620
    Offline posted

    Hello Vincent,

    Thank you for posting in our community!

    I have been looking into your question and after an investigation what I could say is that currently we do not provide such functionality out of the box.

    However, what I could suggest as a workaround for modifying the text of the grouped row is handling the igGrid’s rowsRendered event which is fired after data rows are rendered. In the event handler a reference to the grouped row cell that holds the text could be retrieved and its html could be replaced with any value of your choice.

    For example:

    rowsRendered: function (evt, ui) {
        var groupedRowCells = $("td[data-gbsummary=true]");
        $(groupedRowCells).each(function () {
            var text = $(this).html();
            var regex = /\s{1}\d+\s{1}/g;
            var matches = text.match(regex);
            matches.forEach((x) => {
                text = text.replace(x, x + "/ ");

    Here could be found a small sample demonstrating my suggestion.

    Additionally, regarding the following question:

    Vincent LEBRANCHU said:
    is it also possible to put "Max" before the grouped column name? (e.g., Max Niv Escal. instead of Niv Escal. Max)

    What I could say is that using a similar approach to the abovementioned one could achieve your requirement and cover other specific scenarios as well.

    Please test it on your side and let me know if you need any further assistance regarding this matter.

    Looking forward to your reply.

    Riva Ivanova
    Associate Software Developer