How to manipulate the text of the k-group-indicator button

[James]

In my formatting of the grid I set the grid column titles. However when the user groups by the columns the k-group-indicator button uses the same "Title". Is there a way to have the k-group-indicator display a different text? My issue is that it doesn't format as HTML the same as the grid so it displays the html markup "<br/></th>" which is not what I want.

 

 {
                    field: "ClientName", title: "[[[Client<br/>Name]]]",
                    template: "#= data.ClientName #",
                    width: 100,
                    groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
                    hideOnGroup: true
                },
                {
                    field: "Acct", title: "[[[Account<br/>Number]]]",
                    template: "#= data.Acct #",
                    width: 100,
                    groupHeaderTemplate: "[[[Account Number]]]  ${data.value}",
                    hideOnGroup: true
                },

 {
                    field: "ClientName", title: "[[[Client<br/>Name]]]",
                    template: "#= data.ClientName #",
                    width: 100,
                    groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
                    hideOnGroup: true
                },
                {
                    field: "Acct", title: "[[[Account<br/>Number]]]",
                    template: "#= data.Acct #",
                    width: 100,
                    groupHeaderTemplate: "[[[Account Number]]]  ${data.value}",
                    hideOnGroup: true
                },

[Nikolay]

Hi James,

Thank you for sharing this use case with us. At the time being it is not possible to render HTML in the groupHeaderTemplate. I will investigate if a workaround is possible and will get back to you.

Regards,

Nikolay

[James]

I think my issue may be solved by removing the <br/> HTML markup from the title and applying the style  headerAttributes: { style: "white-space: pre-wrap;" },

This formats the title over two lines correctly and doesn't have a negative affect on the Grouping header.

[Nikolay]

Hi James,

A possible workaround is to append the HTML with jQuery in the dataBound event handler:

              dataBound: function() {
                setTimeout(function() {
                  	let label = $(".k-grouping-header").find(".k-chip-label").text();
                	$(".k-grouping-header").find(".k-chip-label").text("").append("<div>" + label + "</div>")
                });
              }

Dojo demo: https://dojo.telerik.com/VYWqlEBE

Regards,

Nikolay