Group Header Template causing issues with other columns

[Steve]

I have a grid that I am binding to a server model.  I use the .Ajax() so that I can group it by a column.  I want to NOT display the column I am grouping by so I implemented the GroupHeaderFormat() and hide the column.  When I do the ClientTemplate() formatting on a different column goes awry.  I've attached screen shots that show the before and after.  For "before" the code is this:

@(Html.Kendo().Grid(Model.listEvents)
    .Name("Grid2")
    .Columns(columns =>
    {
        columns.Bound(p => p.production_date)
            .Title("Date")
            .ClientTemplate("#= kendo.toString(production_date, \"MM/dd/yyyy\")#");
        columns.Bound(p => p.shift_name).Title("Shift");
        columns.Bound(p => p.timestamp).Title("Time").ClientTemplate("#= kendo.toString(timestamp, \"hh:mm:ss\")#");
        columns.Bound(p => p.responsible).Title("Responsible");
        columns.Bound(p => p.area_name)
            .Title("Area")
            ;
        columns.Bound(p => p.alarm_message).Title("Alarm Message");
        columns.Bound(p => p.comment).Title("Comment");
        columns.Bound(p => p.charged_seconds)
            .Title("Charged Time (min)")
            .ClientTemplate("#= kendo.toString(charged_seconds, \"n2\")#")
            .ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Group(groups => groups
            .Add(p => p.area_name))
    )
    .HtmlAttributes(new { style = "border: 3px solid #666666" })
)

For "after" it is this:

@(Html.Kendo().Grid(Model.listEvents)
    .Name("Grid2")
    .Columns(columns =>
    {
        columns.Bound(p => p.production_date)
            .Title("Date")
            .ClientTemplate("#= kendo.toString(production_date, \"MM/dd/yyyy\")#");
        columns.Bound(p => p.shift_name).Title("Shift");
        columns.Bound(p => p.timestamp).Title("Time").ClientTemplate("#= kendo.toString(timestamp, \"hh:mm:ss\")#");
        columns.Bound(p => p.responsible).Title("Responsible");
        columns.Bound(p => p.area_name)
            .Title("Area")
            .Hidden(true)
            .GroupHeaderTemplate(@<text>Area: @item.Key</text>)
            .ClientGroupHeaderTemplate("Fournd in Area: #= value")
            ;
        columns.Bound(p => p.alarm_message).Title("Alarm Message");
        columns.Bound(p => p.comment).Title("Comment");
        columns.Bound(p => p.charged_seconds)
            .Title("Charged Time (min)")
            .ClientTemplate("#= kendo.toString(charged_seconds, \"n2\")#")
            .ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Group(groups => groups
            .Add(p => p.area_name))
    )
    .HtmlAttributes(new { style = "border: 3px solid #666666" })
)

[Daniel]

Hello Steve,

The values are not formatted because a JavaScript error. The expression in the ClientGroupHeaderTemplate is not correct:

.ClientGroupHeaderTemplate("Fournd in Area: #= value")

so the data will be shown as formatted on the server. Correcting the expression:

.ClientGroupHeaderTemplate("Fournd in Area: #= value#")

or removing the template should resolve the problem.

Regards,
Daniel
Telerik

[Steve]

Thank you Daniel.  That fixed it.