This is a migrated thread and some comments may be shown as answers.

Setting the Grid grouping UI element with a custom string

7 Answers 1064 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 17 Feb 2012, 09:36 PM
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:

7 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 22 Feb 2012, 05:50 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 30 May 2017, 05:05 PM

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?

0
Orlin
Telerik team
answered on 02 Jun 2017, 08:32 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Richard
Top achievements
Rank 1
answered on 02 Jun 2017, 09:44 PM

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);
0
Richard
Top achievements
Rank 1
answered on 02 Jun 2017, 09:47 PM

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,
 
}]
0
Richard
Top achievements
Rank 1
answered on 02 Jun 2017, 09:48 PM

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,
 
}]
0
Orlin
Telerik team
answered on 07 Jun 2017, 12:10 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Bill
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Richard
Top achievements
Rank 1
Orlin
Telerik team
Share this question
or