How to format a date in a row header column for PivotGrid

[Andrew]

I have follow Kendo UI for ASP.NET MVC Local binding example to create my pivot view. 

At my pivot grid, the rows is group by a date, however, the date display on the row header is  a long date format. How to format a date in a row header column to a short date?

 At the following code, I am able to use the template to format  a date field to a short the format, but not on the row header column. please see the picture  for the detail.

@model IEnumerable<TelerikMVCStudy.Domain.Dailyforecast_view>

@{
    ViewBag.Title = "Index";
}

<h2>Pivot</h2>
@(Html.Kendo().PivotConfigurator()
    .Name("configurator")
    .HtmlAttributes( new { @class = "hidden-on-narrow"})
    .Height(570)
)

@(Html.Kendo().PivotGrid<TelerikMVCStudy.Domain.Dailyforecast_view>()
    .Name("pivotgrid")
    .HtmlAttributes(new { @class = "hidden-on-narrow" })
    .Configurator("#configurator")
    .Height(579)
    .BindTo(Model)
    .DataCellTemplateId("dataCellTemplate")
    .ColumnHeaderTemplateId("headerTemplate")
    .RowHeaderTemplateId("rowHeaderTemplate")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Schema(schema => schema
            .Model(m => m.Field("Utility", typeof(string)).From("Utility"))
            .Cube(cube => cube
                .Dimensions(dimensions =>
                {
                    dimensions.Add(model => model.Portfolio).Caption("Portfolio");
                    dimensions.Add(model => model.Utility).Caption("All Utility");
                    dimensions.Add(model => model.CalendarDate.ToShortDateString()).Caption("CalendarDate");
                })
                .Measures(measures =>
                {
                    measures.Add("sum").Format("{0:N4}").Field(model => model.MMBtu).AggregateName("sum");
                    measures.Add("max").Field(model => model.CalendarDate).AggregateName("max");
                })
        )
        )
        .Columns(columns =>
        {
            columns.Add("Utility").Expand(true);
        })
        .Rows(rows => rows.Add("CalendarDate").Expand(true))
        .Measures(measures => measures.Values("sum"))
        .Events(e => e.Error("onError"))

    )
)
<script>
    function onError(e) {
        alert("error: " + kendo.stringify(e.errors[0]));
    }
</script>
<script id="dataCellTemplate" type="text/x-kendo-tmpl">
    # var columnMember = columnTuple ? columnTuple.members[0] : { children: [] }; #
    # var rowMember = rowTuple ? rowTuple.members[0] : { children: [] }; #
    # var value = (dataItem.value instanceof Date) ? kendo.toString(dataItem.value,"d") : kendo.toString(kendo.parseFloat(dataItem.value) ||"N/A", "N4"); #

    # if (columnMember.children.length || rowMember.children.length) { #
        <em  style="color: red">#: value # (total)</em>
    # } else { #
        #: value #
    # } #
</script>

<script id="headerTemplate" type="text/x-kendo-tmpl">
    # if (!member.children.length) { #
        <em>#: member.caption #</em>
    # } else { #
        #: member.caption #
    # } #
</script>
<script id="rowHeaderTemplate" type="text/x-kendo-tmpl">
    # if (!member.children.length) { #
         <em>#: member.caption #</em>
    # } else { #
         #: member.caption #
    # } #
</script>

<style>
    #pivotgrid
    {
        display: inline-block;
        vertical-align: top;
        width: 70%;
    }

    #configurator
    {
        display: inline-block;
        vertical-align: top;
    }
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>

[Georgi Krustev]

Hello Andrew,

The PivotGrid keeps the dimension values as strings. Hence you will need parse the string values and then to format them. Check this how-to demo for more details:

• http://docs.telerik.com/kendo-ui/controls/data-management/pivotgrid/how-to/format-dates

Note that  you need to use the proper format in order to parse the date string.

Regards,
Georgi Krustev
Telerik