Setting the Grid grouping UI element with a custom string

[Bill]

How does one set the grid's grouping UI elements to display a custom description. Meaning the grouping buttons at the top of the grid and the group designations that are displayed on the left hand side of the grid. By default these show the group field: the grid fields:

[Iliana Dyankova]

Hi Bill,

To change the default title description you could add a handler on the dataBound event and use jQuery to replace the text, which will be shown if there are not any groups. The following code snippet could be used for this purpose:

$("#grid").kendoGrid({
    dataBound: function(e){
        if (this.dataSource.group().length == 0){
            setTimeout(function(){
            $(".k-grouping-header").text("Your text here");
        });
    }
},

Regarding the second part of your question - there is not supported option for changing the text of the group designations.

All the best,
Iliana Nikolova
the Telerik team

[Richard]

This is nice but how do I set the indicator's text? Specifically, how do I set the the text for:  $(".k-group-indicator").text("Your text here"); 

 

I need the grouping buttons to have dynamic text. The field name does not cut it. Why is this so difficult?

[Orlin]

Hello Richard,

You can use this dojo example (http://dojo.telerik.com/ulIQO/2) as a starting point. You could also look into using a function with the Grid's group event that changes the title of the button.

At this time there is no built in, easier way of doing this. You can submit a feature request at the Kendo UI feedback portal however. If the item accumulates enough votes, it will be taken into consideration for future releases.

Regards,
Orlin
Progress Telerik

[Richard]

Wow Orlin, thanks for pointing me into the right direction. I have since solved our problem, and I think this would be useful for Kendo Grid built in features...

 

Anywhere, here is my code expanded. Try it out yourself. Thanks a lot! Cheers!

 

//Customize group buttons
setTimeout(function () {

    var columns = $("#grid .k-grid-header .k-link");
    var fields = [];
    var newButtonText = [];

    $(e.groups).each(function (index) { //for each grouped field...
        fields.push(e.groups[index].field); //gather fields to be grouped...
    });

    $(columns).each(function (i) { //for each column header in the Demand Report grid...
        var column = columns[i];
        $(fields).each(function (index) { //for each field
            if (column.innerHTML.indexOf(fields[index]) !== -1) { //see if column's innerHTML contains fieldname (workaround)
                newButtonText.push(column.text); //matched, let's store the column's header for the button text
            }
        });
    });

    var groupingColumns = $(".k-grouping-header a.k-link");
    $(groupingColumns).each(function (index) { //for each group button
        $(this).text(newButtonText[index]); //update button text with dragged column's text
    });

}, 1);

[Richard]

BTW, this mentioned code will only work if you set something in the columnHeaderTemplate (innerHTML).

 

For example my column definition is like so:

            columns: [
                {
                    field: "MyField1",

headerTemplate: "My Field 1<span name='MyField1' class='k-icon k-i-close remove' style='float: right;'></span>",

                    width: 100,
                    lockable: true,
                    locked: true,

}]

[Richard]

BTW, my code will only work by setting the grid's columns headerTemplate. It looks for a match in the innerHTML (since there is no straightforward way to make a relationship between data field and column header).

 

You will need a column definition like so:

            columns: [
                {
                    field: "MyField1",

headerTemplate: "My Field 1<span name='MyField1' class='k-icon k-i-close remove' style='float: right;'></span>",

                    width: 100,
                    lockable: true,
                    locked: true,

}]

[Orlin]

You are very welcome, Richard.

I'm glad I was able to help you sort this out.

Thank you for the code. I am sure others will find it useful as well.


Regards,
Orlin
Progress Telerik