Dynamic Column Group Title

[Mark]

I've got a grid with column group headers that display the day of week and under each column group are the actual value columns. I want the column group to display the preset value of "Mon", "Tue", etc. but also after show the date. So the final column group header would read "Mon MM/dd/yyyy". I have the date I need to rename the column group header at run-time. How do I go about coding this?

I tried the below but it only renames the value column header and not the group.

$("#timecard th[data-field=MonST]").html("New");

 

This is my code for the group "Mon".

columns.Group(g => g.Title("Mon")
    .Columns(monday =>
    {
        monday.Bound(p => p.MonST).Filterable(false).Sortable(false).ClientTemplate("#if(MonST == 0 || MonST == null || isNaN(MonST)){MonST=null} else {##=parseFloat(MonST).toFixed(1)##}#").Width(40).Title("ST");
        monday.Bound(p => p.MonOT).Filterable(false).Sortable(false).ClientTemplate("#if(MonOT == 0 || MonOT == null || isNaN(MonOT)){MonOT=null} else {##=parseFloat(MonOT).toFixed(1)##}#").Width(40).Title("OT");
        monday.Bound(p => p.MonDT).Filterable(false).Sortable(false).ClientTemplate("#if(MonDT == 0 || MonDT == null || isNaN(MonDT)){MonDT=null} else {##=parseFloat(MonDT).toFixed(1)##}#").Width(40).Title("DT");
    })
);

 

 

 

[Tsvetina]

Hi Mark,

You can achieve this by applying a ClientGroupHeaderColumnTemplate to the column in question:

columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").ClientGroupHeaderColumnTemplate("#:kendo.toString(value, 'ddd MM/dd/yyyy')#");

You can read more about the different group templates here: Group Templates.

Regards,
Tsvetina
Progress Telerik

[Mark]

I have been reading the info on Group Templates but my tests did not work. I tried your example and it doesn't display either. In the screenshot attached I need the Column Group "Mon" to display "Mon - MM/dd/yyyy" with the date value I have in JavaScript.

columns.Group(g => g.Title("Mon")
    .Columns(monday =>
    {
        monday.Bound(p => p.MonST).Filterable(false).Sortable(false).Width(40).Title("ST")
            .ClientTemplate("#if(MonST == 0 || MonST == null || isNaN(MonST)){MonST=null} else {##=parseFloat(MonST).toFixed(1)##}#")
            .Format("{0:MM/dd/yyyy}").ClientGroupHeaderColumnTemplate("#:kendo.toString(value, 'ddd MM/dd/yyyy')#")
            ;
        monday.Bound(p => p.MonOT).Filterable(false).Sortable(false).ClientTemplate("#if(MonOT == 0 || MonOT == null || isNaN(MonOT)){MonOT=null} else {##=parseFloat(MonOT).toFixed(1)##}#").Width(40).Title("OT");
        monday.Bound(p => p.MonDT).Filterable(false).Sortable(false).ClientTemplate("#if(MonDT == 0 || MonDT == null || isNaN(MonDT)){MonDT=null} else {##=parseFloat(MonDT).toFixed(1)##}#").Width(40).Title("DT");
    })
);

 

 

[Mark]

I am trying to dynamically change the column title for the groups. In the screenshot "Mon" would be changed dynamically.

 

[Tsvetina]

Hi Mark,

Sorry, I mistook the header of the column group with a column header in a data group in the Grid. Now, I understand the problem and the initial code you shared doesn't work because the column group does not have a data field of its own, it only has a title. So, you can modify your jQuery selector like this:

<script>
    $(document).ready(function(){
        $("#timecard th[data-title=Mon]").html("New");
    });
</script>

Regards,
Tsvetina
Progress Telerik