Setting the Grid grouping UI element with a custom string

8 posts, 0 answers
  1. Bill
    Bill avatar
    2 posts
    Member since:
    Dec 2010

    Posted 17 Feb 2012 Link to this post

    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:
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Feb 2012 Link to this post

    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!
  3. Richard
    Richard avatar
    13 posts
    Member since:
    Mar 2017

    Posted 30 May 2017 in reply to Iliana Nikolova Link to this post

    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?

  4. Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 02 Jun 2017 Link to this post

    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.
  5. Richard
    Richard avatar
    13 posts
    Member since:
    Mar 2017

    Posted 02 Jun 2017 in reply to Orlin Link to this post

    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);
  6. Richard
    Richard avatar
    13 posts
    Member since:
    Mar 2017

    Posted 02 Jun 2017 in reply to Richard Link to this post

    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,
     
    }]
  7. Richard
    Richard avatar
    13 posts
    Member since:
    Mar 2017

    Posted 02 Jun 2017 in reply to Richard Link to this post

    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,
     
    }]
  8. Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 07 Jun 2017 Link to this post

    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.
Back to Top