Edit this page

Modify Measure Tag Captions

It is possible to modify the measure tag captions in the header of a Kendo UI PivotGrid widget.

The following example demonstrates how to access the Internet Sales Amount button and update its content.

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

    <script>
        $(document).ready(function () {
            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
                filterable: true,
                columnWidth: 200,
                height: 580,
                dataSource: {
                    type: "xmla",
                    columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" } ],
                    rows: [{ name: "[Geography].[City]" }],
                    measures: ["[Measures].[Internet Sales Amount]"],
                    transport: {
                        connection: {
                            catalog: "Adventure Works DW 2008R2",
                            cube: "Adventure Works"
                        },
                        read: "http://demos.telerik.com/olap/msmdpump.dll",
                      parameterMap: function(options, type) {
                        var query = kendo.data.transports.xmla.fn.options.parameterMap(options, type);

                        //modify the query here if needed

                        return query;
                      }
                    },
                    schema: {
                        type: "xmla"
                    },
                    error: function (e) {
                        alert("error: " + kendo.stringify(e.errors[0]));
                    }
                },
                dataBound: function() {
                  var tags = this.wrapper.find(".k-settings-measures > span.k-button");

                  tags.each(function() {
                    var tag = $(this);
                    var name = tag.text().split(".");
                    var caption = name[name.length - 1];

                    caption = caption.substring(1, caption.length - 1);

                    //update text node
                    tag[0].childNodes[0].nodeValue = caption;
                  });
                }
            }).data("kendoPivotGrid");
        });
    </script>
</div>

See Also

For more runnable examples on the Kendo UI PivotGrid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy