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

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    1 posts
    Member since:
    Feb 2016

    Posted 16 Feb Link to this post

    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>

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 17 Feb Link to this post

    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: Note that  you need to use the proper format in order to parse the date string.

    Regards,
    Georgi Krustev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top