New to Kendo UI for jQuery? Download free 30-day trial

Format Dates in the Dimension Labels of the PivotGrid

Environment

Product Progress Kendo UI PivotGrid for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I control the format of the content that is rendered by the dimension labels of the PivotGrid?

Solution

You can achieve this behavior through the implementation of a custom template in the row or in the header template.

The following example demonstrates how to format the date values of the dimension labels in the PivotGrid.

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

<div id="example">
    <div id="pivotgrid"></div>

    <div class="responsive-message"></div>

    <script id="rowTemplate" type="text/x-kendo-template">
      # if (member.name.indexOf("LastSupply") === 0 && member.name !== "LastSupply") { #
          #: kendo.toString(kendo.parseDate(member.caption), "d") #
      # } else { #
          #: member.caption #
      # } #
    </script>

    <script>
        $(document).ready(function () {
            var d = new Date();
            products.forEach(function(p) {
              p.LastSupply = new Date(d);
              d.setDate(d.getDate() + 1);
            });

            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
                columnWidth: 120,
                height: 570,
                rowHeaderTemplate: $("#rowTemplate").html(),
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            fields: {
                                ProductName: { type: "string" },
                                UnitPrice: { type: "number" },
                                UnitsInStock: { type: "number" },
                                Discontinued: { type: "boolean" },
                                LastSupply: { type: "date" },
                                CategoryName: { field: "Category.CategoryName" }
                            }
                        },
                        cube: {
                            dimensions: {
                                ProductName: { caption: "All Products" },
                                CategoryName: { caption: "All Categories" },
                                Discontinued: { caption: "Discontinued" }
                            },
                            measures: {
                                "Sum": { field: "UnitPrice", format: "{0:c}", aggregate: "sum" },
                                "Average": { field: "UnitPrice", format: "{0:c}", aggregate: "average" }
                            }
                        }
                    },
                    columns: [{ name: "CategoryName", expand: true }, { name: "ProductName" } ],
                    rows: [{ name: "Discontinued", expand: true }, { name: "LastSupply", expand: false }],
                    measures: ["Sum"]
                }
            }).data("kendoPivotGrid");
        });
    </script>
</div>

See Also

In this article