Creating custom Group Heading Format based on {value}

Posted by: davidmartin-bennett on 12 January 2023, 9:59 pm EST

    • Post Options:
    • Link

    Posted 12 January 2023, 9:59 pm EST


    I was wondering if there was a way to hook into the Group Heading Format event to add our own calls / data based on the value about to be rendered?

    For example: my groupHeaderFormat would be something like this:

    groupHeaderFormat=“{{ RenderHeading(‘{value}’}}”

    then in my .ts file I could have something like:

    private DataArray = [

    {name: xxx, id: 1},

    {name: yyy, id: 2}


    public RenderHeading(value: string): string{

    const selectedItem = DataArray.find((item) => == value);

    return `${selectedItem.Id} - ${value}`;


    This would then render two headers as

    1 - xxx

    2 - yyy

    The problem at the moment is, angular seems to render before the header tags are replaced so instead of {value} being replaced with xxx / yyy and those values being passed to the function, the tag {value} is passed to the function twice instead.

  • Posted 16 January 2023, 2:53 pm EST


    The groupHeaderFormat property only receives the string and we cannot get the {value} from there when trying to pass the function for this.

    Instead of this you can use the formatItem event of the FlexGrid and customize the text as per your DataArray. Please refer to the following sample for reference:{"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.component.ts"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.component.ts"}

    Also, on using the function to set the customer header for groupHeaderFormat, it would affect the FlexGrid performance.


    Manish Gupta

  • Posted 17 January 2023, 7:51 pm EST

    Perfect, thank you. This makes total sense

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels