Displaying Year component from a datetime data in PivotGrid

[Hage]

Hi Telerik Team,

Currently I setup my mvc pivot grid as follow:

 

@(Html.Kendo().PivotConfigurator()
                        .Name("configurator")
                        .HtmlAttributes(new { @class = "hidden-on-narrow" })
                        .Filterable(true)
                        .Sortable()
                        .Height(580)
            )

@(Html.Kendo().PivotGrid<EmployeeTurnOverDto>
    ()
    .Name("pivotgrid")
    .HtmlAttributes(new { @class = "hidden-on-narrow" })
    .Filterable(true)
    .Sortable()
    .Configurator("#configurator")
    .ColumnWidth(120)
    .Height(580)
    .BindTo(Model)
    .DataSource(dataSource => dataSource
    .Ajax()
    .Schema(schema => schema
    .Cube(cube => cube
    .Dimensions(dimensions =>
    {
    dimensions.Add(model => model.FullName).Caption(L("Staffs"));
    dimensions.Add(model => model.Institution).Caption(L("Institution"));
    dimensions.Add(model => model.Department).Caption(L("Department"));
    dimensions.Add(model => model.TurnOverDate).Caption(L("TurnOverDate"));
    })
    .Measures(measures =>
    {
    measures.Add("In").Field(model => model.JoinFlag).AggregateName("sum").Caption(L("In"));
    measures.Add("Out").Field(model => model.ResignFlag).AggregateName("sum").Caption(L("Out"));
    })
    )
    )
    .Columns(columns =>
    {
    columns.Add("TurnOverDate").Expand(true);
    })
    .Rows(rows => rows.Add("Denomination").Expand(true))
    .Measures(measures => measures.Values("In"))
    .Events(e => e.Error("onError"))
    )
    )

 

Could you advise how to add the Year and/or Month (in MMM format) component of the TurnOverDate in the Column fields?

 

Note that I am not using cube, but using a flat data.

 

Thank you.

 

Regards,

Hage

 

[Alex Hajigeorgieva]

Hello, Hage,

Thank you for the provided Kendo UI PivotGrid for ASP.NET MVC configuration. 

To change the way the data is displayed in the pivot grid, you can use a column header template for the column headers or a data cell template for the content of the columns. We have a demo which shows sample usage of these templates at:

https://demos.telerik.com/aspnet-mvc/pivotgrid/templates

For example, to format the headers as dates in a similar scenario as yours, this how the template could look:

* note that a new Date() is created on the client from the member caption which is a string

@(Html.Kendo().PivotGrid<Pivot.Models.OrderViewModel>()
  // configuration
  .ColumnHeaderTemplateId("headerTemplate")
)
<script id="headerTemplate" type="text/x-kendo-tmpl">
    # if (!member.children.length) { #
    <em>#: kendo.toString(new Date(member.caption), "MMM") #</em>
    # } else { #
    #: member.caption #
    # } #
</script>

Here is more information on date formatting, should you need to reference it:

https://docs.telerik.com/kendo-ui/framework/globalization/dateformatting

Let me know if you face any difficulties.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik