Format Dates in Dimension Labels

The PivotGrid enables you to control the format of the content that is rendered by the dimension labels.

This behavior is achieved 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
Not finding the help you need? Improve this article