Items is undfiend In Kendo Grid group

Question

This is how I declaring my kendo grid

    @(Html.Kendo().Grid<LogModel>()
        .Name("ChangeLog")
        .Columns(columns =>
        {
            columns.Bound(m => m.dateTimeChangeDate)
                 .ClientGroupHeaderTemplate("#=console.log(items)#")
                .Title("Date and Time")
                .ClientTemplate("#= ChangeDate#")
                .Width("12%");
            columns.Bound(m => m.Component)
                .Title("Component")
                .Width("8%")
                .Filterable(filterable => filterable.UI("componentFilter")
                .Extra(false)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                    .Contains("Contains")
                 ))
            );
            columns.Bound(m => m.Action)
                .Title("Action")
                .Width("15%")
                .Filterable(filterable => filterable
                    .UI("actionFilter")
                    .Extra(false)
                    .Operators(operators => operators
                        .ForString(str => str.Clear()
                        .Contains("Contains")
                    ))
                 );
            columns.Bound(m => m.Changer)
                .Title("Changer")
                .Width("10%");
            columns.Bound(m => m.Identifier)
                .Title("On")
                .Width("15%");
            columns.Bound(m => m.OldValue)
                .Title("Old Value")
                .Width("20%");
            columns.Bound(m => m.NewValue)
                .Title("New Value")
                .Width("20%");
        })
        .Filterable()
        .Selectable()
        .Sortable()
        .Groupable()
        .Resizable(resize => resize.Columns(true))
        .ToolBar(toolbar =>
        {
        toolbar.Template(
            @<text>
                @*
                    The year is 2017, kendo does not have a realiable html server control for the excel button when we are using a template.
                    So we have to explicitly use the excel export command button mark up. Kendo will recoginze the k-grid-excel CSS class and configure it accoridngly.
                *@
                <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
                <span style='padding-left:35%;font-weight:bold;padding-top:7px'>@ViewBag.ProjectNumber</span>
                <span style='float:right;font-weight:bold;padding-top:7px'>Total: <span id="change-log-record-count">@ViewBag.ChangeLogRecordAmount</span> records</span>

            </text>
            );
        })
        .Excel(excel => excel.AllPages(true).FileName(@ViewBag.ChangeLogType + " Change Log " + @ViewBag.ProjectNumber + ".xlsx").Filterable(true))
        .DataSource(dataSource => dataSource
             .Ajax()
             .Model(model =>
             {
                 model.Id(p => p.Id);
             })
             .Read(read => read.Action("FetchChangeLogData", "ChangeLog")
             .Data(".buildParam"))
       )
       .Events(e => e.FilterMenuInit("eresizeFilter")
                     .ExcelExport("modifyFormatForExcel")
                     .DataBound("preselectCustomFilter"))
       .ClientDetailTemplateId("change-log-details-template")
)

According to this link for kendo grid documentation there is a list of fields available for me to use in the template and items is one of them. But when I try to group my grid I get an error that items is undefined. I also tried group and it is also undefined. I tried value and field and those works fine. Is there something I am missing or is this feature not fully implemented yet.

UPDATE Here is an example based off of their demo in the link. I slightly modify it as a POC to demonstrate that you can inspect items. I understand that they use Kendo UI and I am using UI for ASP.NET MVC, but that should matter that much unless it does.

Update #2 Looks like only the value and field is working the aggregates and the items field is undefined.

Update #3 It seems that .ClientGroupHeaderTemplate may not be fully implemented yet since thier documentation mention ClientGroupFooterTemplate and not the other.

Update #4 Once I add the aggregate field count to the data source, I can now access it in the template.

.DataSource(dataSource => dataSource
             .Ajax()
             .Model(model =>
             {
                 model.Id(p => p.Id);
             })
             .Aggregates(aggregates =>
             {
                aggregates.Add(p => p.dateTimeChangeDate).Count();
             })
             .Read(read => read.Action("FetchChangeLogData", "ChangeLog")
             .Data("buildParam"))
       )

Check documentation here

Answer 1

As I mentioned from my comment I don't think you have understood what "items" stands for. In your example if you set

groupHeaderTemplate: "Admin count: #=items[0].name#"

Your Header will show correctly "Admin count: Jane Doe". The variable "items" is a reference to the binded data. That means that it is a list of objects. If you write items[1].age it will show 30 etc.

If you want to show the number of rows as your "Admin count" suggest you could just use

groupHeaderTemplate: "Admin count: #=items.length#"

if you want to use items instead of count aggregation.

This way it should be easier to understand how exactly to handle the variable "items" in order to show what you need to show.

Now if you have any other problem explain please what exactly do you want to show to your header?

Answer 2

This worked for me in that fiddle:

groupHeaderTemplate: "Admin count: #=count#"

Try

.ClientGroupHeaderTemplate("#=count#")