Formatting text and column indicator width to the Grouping Header prefacing column names

[Reid]

I see the post below this one with respect to the client group header and it works but must be added to each column.

1) How can I just add text to the grouping header changing it from the default text to "Grouped by Columns : " when the user drags a column there.  And then return it to default text when the user has clicked the icon to remove the grouping on that column?

2) How can I set the minimum width for the column indicator in the grouping header.  Right now it is truncating the text of the column name if it is too wide.

Thanks

[Eyup]

Hello Reid,

You can achieve the second requirement using the following CSS rule:

<style>
  .k-group-indicator{
    min-width:300px;
  }
</style>

And the first requirement using the group event handler:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/group

More specifically:

group: function(e) {
  if (e.groups.length) {
    setTimeout(function(){
      $(".k-grouping-header").prepend("<span>Grouped by Columns: </span>");
    },20);
  }
}

I've also prepared a live dojo sample to demonstrate these suggestions:
https://dojo.telerik.com/UloHAGUS

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Reid]

I am working through this issue and thank you for replying.

I am using Telerik.UI.for.AspNet.Core so I have two questions.

1) How is this done in the MVC format?

If I use this segment only on the document ready it does nothing.

 

$("#productsgrid").kendoGrid({
   group: function (e) {
     if (e.groups.length) {
       setTimeout(function () {
       $(".k-grouping-header").prepend("<span>Grouped by Columns: </span>");
     }, 20);
   }
}

});

 

If I use the rest of the JS in the Dojo example it does not show the grid column headers.

 

2)  I noticed that in the Dojo example there is a newer version of the Kendo UI scripts and .css? 
Inside VS the Nuget Package Manger it only shows version 2018.1.221 which is what I am using.

How do you upgrade to the latest?  Should I?

 

Thanks

[Eyup]

Hi Reid,

The approach should work properly with your version of the toolset as well. For MVC or Core version of the grid you can use the .Events(events => events.Group("onGrouping")) to attach the function as demonstrated in the following demo:
https://demos.telerik.com/aspnet-core/grid/events

Regards,
Eyup
Progress Telerik

[Reid]

Hi Eyup,

I am familiar with tapping into events but the link you provide is generic.  I do not see how to format the header text as I am requesting.  Writing to the log is not the desired result.

 

Please give me a block of code that actually does what I am requesting.

 

Thank you

[Reid]

I just realized that you did provide a code block above but when I try this below nothing changes, no custom text being displayed

function onGrouping(arg) {
            console.log("Group on " + kendo.stringify(arg.groups));
            if (arg.groups.length) {
                    $(".k-grouping-header").prepend("<span>Grouped by Columns: </span>");
            }
        }

I also tried this :

 

$(document).ready(function () {
           $("#productsgrid").kendoGrid({
               group: function (e) {
                   if (e.groups.length) {
                       setTimeout(function () {
                           $(".k-grouping-header").prepend("<span>Grouped by Columns: </span>");
                       }, 20);
                   }
               }

           });

Reid

[Eyup]

Hello Reid,

Try setting some delay before executing the logic, as demonstrated in the sample snippet provided in my initial response:
https://www.w3schools.com/jsref/met_win_settimeout.asp

Regards,
Eyup
Progress Telerik

[Reid]

This is not working.  I tried the timeout as you can see that is now commented out and either way the code gets called verified by the alert but the grouping header text is not changing, just the column name appears.

 

function onGrouping(arg) {

           console.log("Group on " + kendo.stringify(arg.groups));
           if (arg.groups.length) {
                   $(".k-grouping-header").prepend("<span>Grouped by Columns: </span>");
                  alert("Grouping Header text prepended");
               //setTimeout(function () {
               //    $(".k-grouping-header").prepend("<span>Grouped by Columns: </span>");
               //}, 20);
           }
       }

[Eyup]

Hi Reid,

Please excuse us for the delay with this case. I've prepared an improved version of the solution:

.Events(events => events
   .Group("onGroup")
)

JavaScript:

function onGroup(e) {
    if (e.groups.length) {
        $(".k-grouping-header").addClass("groupingHeaderText");
    }
    else {
        $(".k-grouping-header").removeClass("groupingHeaderText");
    }
}

CSS:

.groupingHeaderText::before {
    content: "Grouped by Columns: ";
}

In addition, I am also sending a working Core web site to demonstrate that. Please run the attached project and verify that it works as expected on your side, too.

Regards,
Eyup
Progress Telerik

[Reid]

Thank you for that.  

In my solution if I add the code above to the onGrouping event and declare the handler in the grid markup as you show the result is that the column sort of freezes and the column header freezes when you drop the column header over the group section.  The text does not show and I need to refresh the page to correct it.. 

[Eyup]

Hello Reid,

Please press F12 in your browser to open the debugger inspector and check whether there are any script errors being thrown to cause this issue. 
If the issue remains, please modify the sample provided in my previous reply and open a formal support ticket to send it back to us. You can also mention this thread in the new ticket.

Regards,
Eyup
Progress Telerik