# Change the Field Names of the PivotGrid

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® PivotGrid for jQuery</td>
 </tr>
 <tr>
  <td>Operating System</td>
  <td>Windows 10 64bit</td>
 </tr>
 <tr>
  <td>Visual Studio Version</td>
  <td>Visual Studio 2017</td>
 </tr>
 <tr>
  <td>Preferred Language</td>
  <td>JavaScript</td>
 </tr>
</table>

## Description

How can I modify and control the content that is rendered by the field names of the Kendo UI PivotGrid widget?

## Solution

The following example demonstrates how to change the text displayed by the `[Date].[Calendar]` and `[Product].[Category]` fields in a PivotGrid.

```dojo
<div id="example">
    <div id="configurator"></div>
    <div id="pivotgrid"></div>

    <script>
        $(document).ready(function () {
            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
                filterable: true,
                columnWidth: 200,
                height: 580,
                dataBound: function() {                          
                  var fields = this.columnFields.add(this.rowFields).add(this.measureFields);

                  fields.find(".k-chip")
                  	.each(function(_, item) {
                    	item = $(item);
                    	var text = item.data("name").split(".").slice(-1) + "";

                    	item.contents().eq(0).replaceWith(text);
                  	});
                },
                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: "https://demos.telerik.com/service/v2/olap/msmdpump.dll"
                    },
                    schema: {
                        type: "xmla"
                    },
                    error: function (e) {
                        alert("error: " + kendo.stringify(e.errors[0]));
                    }
                }
            }).data("kendoPivotGrid");                   
        });
    </script>
    <style>
        #pivotgrid
        {
            display: inline-block;
            vertical-align: top;
            width: 70%;
        }               
    </style>
</div>
```

## See Also

* [PivotGrid JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/pivotgrid)
* [Access MDX Query](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/access-mdx-query)
* [Change Data Source Dynamically](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/change-data-source)
* [Drill Down Navigation Always Starting from Root Tuple](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/drill-down-with-root-tuple)
* [Expand the Include fields TreeView](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/expand-include-treeview)