Format/replace text in Grid Grouping header

[Tom]

Is there a way to replace the text in the grouping header? For example, instead of showing daypart: 20180615AM after grouping by the daypart column I want to display Fri June 15 AM.

 

[Stefan]

Hello, Tom,

The desired result can be achieved using the group header template property of the Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupheadertemplate

MVC Core:

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridBoundColumnBuilder#methods-ClientGroupHeaderTemplate(System.String)

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Tom]

No, unfortunately this is not helpful at all. Adding the ColumnGroupHeaderTemplate property did not have any effect. Here is a copy of my attempt to change the header text. 

@(Html.Kendo().Grid<SessionItemModel>()
      .Name("ScheduleGrid")
      .DataSource(d => d
         .Ajax()
         .Batch(true)
         .PageSize(7)
         .ServerOperation(false)
         .Model(model => { model.Id(p => p.pkey);
         })
         .Read(r => r.Action("Read", "Schedule"))
         .Update(u => u.Action("Update","Schedule"))
         .Group(g => g.Add(p => p.daypart)))
      .Columns(c => {
         c.Bound(m => m.pkey).Visible(false);
         c.Bound(m => m.sessionkey).Visible(false);
         c.Bound(m => m.daypart).Visible(false).ClientGroupHeaderTemplate("#= template(daypart) #");
         c.Bound(m => m.type).Visible(false);
         c.Bound(m => m.slot).Title("Slot");
         c.ForeignKey(m => m.personid, (System.Collections.IEnumerable)ViewData["persons"], "personid", "name").Title("Name");
         c.Bound(m => m.editable).Visible(false);
      })
      .Groupable(false)
      .Pageable()
      .Editable(e => e.Mode(GridEditMode.InCell))
      .Events(e => e.BeforeEdit("onEdit"))
      )

@section Scripts {
   <script>
      function onEdit(e) {
         console.log(e);
         if (e.model.personid != "S1")
            e.preventDefault();
      }

      function template(data) {
         return data.substr(4, 2) + ' ' + data.substr(6, 2);
      }
   </script>
}

 

based on what little I could find on how to use templates. Could you please expand upon your answer using my code as a starting point and also provide a link to where templates are documented.

[Stefan]

Hello, Tom,

Thank you for the provided code.

After inspecting it I noticed that the issue occurs because if the column visibility is set the false, the ClientGroupHeaderTemplate is not called.

As this is not expected, I have forward this to the developers' team for confirmation if this is indeed an issue on our end or there is a reason for this.

Thank you in advance for the patience.

Regards,
Stefan
Progress Telerik

[Stefan]

Hello, Tom,

I receive the report from the developers' team.

The template is not called as in the ASP.NET Core version if the column is marked as not visible it will not be generated in the jQuery code sent to the client.

In this case, we can suggest, setting the column as visible in the declaration, and then on the dataBound event of the Grid using the columnHide method to visually hide it:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/hidecolumn

Apologies for the inconvenience caused by the need for this workaround.

Regards,
Stefan
Progress Telerik

[Tom]

This does indeed solve the problem. I'm providing the updated code as an example to others who might need to do something similar.

@(Html.Kendo().Grid<SessionItemModel>()
      .Name("ScheduleGrid")
      .DataSource(d => d
         .Ajax()
         .Batch(true)
         .PageSize(7)
         .ServerOperation(false)
         .Model(model => { model.Id(p => p.pkey);  })
         .Read(r => r.Action("Read", "Schedule"))
         .Update(u => u.Action("Update","Schedule"))
         .Group(g => g.Add(p => p.daypart)))
      .Columns(c => {
         c.Bound(m => m.pkey).Visible(false);
         c.Bound(m => m.sessionkey).Visible(false);
         c.Bound(m => m.daypart).Visible(true).ClientGroupHeaderTemplate("#= template(value) #");
         c.Bound(m => m.type).Visible(false);
         c.Bound(m => m.slot).Title("Slot");
         c.ForeignKey(m => m.personid, (System.Collections.IEnumerable)ViewData["persons"], "personid", "name").Title("Name");
         c.Bound(m => m.editable).Visible(false);
      })
      .Groupable(false)
      .Pageable()
      .Editable(e => e.Mode(GridEditMode.InCell))
      .Events(e => e.BeforeEdit("onEdit").DataBound("onDataBound"))
      )

@section Scripts {
   <script>
      function onEdit(e) {
         console.log(e);

         if (e.model.personid != "S1")
            e.preventDefault();
      }

      function onDataBound(e) {
         e.sender.hideColumn('daypart');
      }

      function template(data) {
         var yr = data.substr(0, 4);
         var mo = data.substr(4, 2);
         var da = data.substr(6, 2);
         var dp = data.substr(8, 2);

         var dt = new Date(yr + '-' + mo + '-' + da);

         return dt.toLocaleDateString('en-us', { weekday: 'long', month: 'long', day: 'numeric' }).replace(',', '') + ' ' + dp;
      }
   </script>
}

[Linda Soukup]

I know that this thread is almost 3 years old, so I'm guessing something has changed. I tried to get the template to work using the above code and the template is only displaying if the column displays. Using javascript to hide the column on databound didn't work--it ignored the template. Is there another way to solve this problem?

[Mihaela]

Hello Linda,

I have tested the example by using the latest version (2021.2.511) of the Telerik UI for ASP.NET Core and the group header template is displayed properly when the column "daypart" is hidden in the "dataBound" event of the grid.

Would you please let me know which version of Kendo and .NET you use in order to replicate the issue and follow up with the respective suggestions? It would be great if you could share the grid's configuration as well.

 

Best,
Mihaela Lukanova
Progress Telerik

[Linda Soukup]

Thanks for the response, Mihaela. I'm clearly missing something. I set up the template to get rid of the "Subject:" in the header, but it is still there.

@(Html.Kendo().Grid<CourseOfferingViewModel>()
.Name("grid")
.Scrollable(sc => sc.Endless(true))
.Pageable(p => p.Numeric(false).PreviousNext(false))
.Groupable(false)
.Columns(columns => {
columns.Bound(column => column.Subject).Visible(false)
.ClientGroupHeaderColumnTemplate("#= template(value) #");
columns.Bound(column => column.CourseName).Title("Courses Offered");
})
.AutoBind(false)
.DataSource("dataSource")
.Events(events => events
.DataBound("onDataBound")
)
)
<script>

function sendAntiForgery(e) {
return kendo.antiForgeryTokens();
}
</script>

@(Html.Kendo().DataSource<CourseOfferingViewModel>()
.Name("dataSource")
.Ajax(s => s
.PageSize(300)
.Read(r => r.Url(Url.Action() + "?handler=ReadCourseRecords").Data("sendAntiForgery"))
.Model(m => m.Id(id => id.CourseOfferingId))
.Group(group=>group.Add(s => s.Subject))
)
)

@section Scripts {
<script>
function template(data) {
return data;
}

function onDataBound(e) {
e.sender.hideColumn('Subject');
}

</script>

}

Thanks,
Linda

[Mihaela]

Upon further testing, I replicated the issue locally and your assumptions are correct - the ClientGroupHeaderColumnTemplate is applied when the column is visible. I would recommend the following alternative:

- hide the column with "Visible(false)" and update the group header in the "dataBound" event of the grid with jQuery;

@(Html.Kendo().Grid<CourseOfferingViewModel>()
  .Name("grid")
  ...
  .Columns(columns =>
  {
    columns.Bound(column => column.Subject).Visible(false);
  })
  ...
  .Groupable(false)
  .Events(ev => ev.DataBound("onDataBound"))
)

<script>
function onDataBound(e) {
$(".k-grouping-row .k-reset").each(function (index, value) {
    var groupingResult = $(value).text().split(":")[1];
        $(value).text(groupingResult);
    });
}
</script>

[Linda Soukup]

Thanks for your assistance, Mihaela. Using the javascript you provided worked great.

[Renu]

the above JavaScript solution worked for me as well