# Templates

The Telerik UI PivotGrid component for ASP.NET Core provides templating options that can be used to customize the way its data is visualized in the table.

Under the hood, the templates use the [Kendo UI Templates syntax](https://docs.telerik.com/kendo-ui/framework/templates/overview).

To use templates in the PivotGrid, apply any of the available template options:

* [Data cell template](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/pivotgrid/templates#data-cell-template)
* [Column header template](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/pivotgrid/templates#column-header-template)
* [Row header template](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/pivotgrid/templates#row-header-template)

## Data Cell Template

The data cell template is the [template](https://docs.telerik.com/kendo-ui/api/kendo/methods/template) which renders the content of the data cell. By default, it renders the `fmtValue` formatted value of the data item.

In the data cell template, you can use the following fields:

* `columnTuple`—The tuple of the corresponding column header cell.
* `rowTuple`—The tuple of the corresponding row header cell.
* `measure`—The value of the data cell measure.
* `dataItem`—The data item itself.

```Razor HtmlHelper
    @(Html.Kendo().PivotGrid()
        .Name("pivotgrid")
        .ColumnWidth(200)
        .Height(570)
        .DataCellTemplateId("dataCellTemplate")
        // Other configuration.
    )

    <script id="dataCellTemplate" type="text/x-kendo-tmpl">
        # var columnMember = columnTuple ? columnTuple.members[0] : { children: [] }; #
        # var rowMember = rowTuple ? rowTuple.members[0] : { children: [] }; #
        # var value = kendo.toString(kendo.parseFloat(dataItem.value) || "N/A", "c2"); #

        # if (columnMember.children.length || rowMember.children.length) { #
            <em  style="color: red">#: value # (total)</em>
        # } else { #
            #: value #
        # } #
    </script>
```

```Razor TagHelper
    <kendo-pivotgrid name="pivotgrid"
                     column-width="200" 
                     height="570" 
                     datacell-template-id="dataCellTemplate">
        // Other configuration.
    </kendo-pivotgrid>

    <script id="dataCellTemplate" type="text/x-kendo-tmpl">
        # var columnMember = columnTuple ? columnTuple.members[0] : { children: [] }; #
        # var rowMember = rowTuple ? rowTuple.members[0] : { children: [] }; #
        # var value = kendo.toString(kendo.parseFloat(dataItem.value) || "N/A", "c2"); #

        # if (columnMember.children.length || rowMember.children.length) { #
            <em  style="color: red">#: value # (total)</em>
        # } else { #
            #: value #
        # } #
    </script>
```

## Column Header Template

The column header template is the [template](https://docs.telerik.com/kendo-ui/api/kendo/methods/template) which renders the content of the column header cell. By default, it renders the caption of the tuple member.

In the column header template, you can use the following fields:

* `member`—The member of the corresponding column header cell.
* `tuple`—The tuple of the corresponding column header cell.

```Razor HtmlHelper
    @(Html.Kendo().PivotGrid()
        .Name("pivotgrid")
        .ColumnWidth(200)
        .Height(570)
        .ColumnHeaderTemplateId("headerTemplate")
        // Other configuration.
    )

    <script id="headerTemplate" type="text/x-kendo-tmpl">
        # if (!member.children.length) { #
            <em>#: member.caption #</em>
        # } else { #
            #: member.caption #
        # } #
    </script>
```

```Razor TagHelper
    <kendo-pivotgrid name="pivotgrid" 
                     column-width="200"
                     height="570" 
                     column-header-template-id="headerTemplate">
        // Other configuration.
    </kendo-pivotgrid>
    
    <script id="headerTemplate" type="text/x-kendo-tmpl">
        # if (!member.children.length) { #
            <em>#: member.caption #</em>
        # } else { #
            #: member.caption #
        # } #
    </script>
```

## Row Header Template

The row header template is the [template](https://docs.telerik.com/kendo-ui/api/kendo/methods/template) which renders the content of the row header cell. By default, it renders the caption of the tuple member.

In the row header template, you can use the following fields:

* `member`—The member of the corresponding column header cell.
* `tuple`—The tuple of the corresponding column header cell.

```Razor HtmlHelper
    @(Html.Kendo().PivotGrid()
        .Name("pivotgrid")
        .ColumnWidth(200)
        .Height(570)
        .RowHeaderTemplateId("headerTemplate")
        // Other configuration.
    )

    <script id="headerTemplate" type="text/x-kendo-tmpl">
        # if (!member.children.length) { #
            <em>#: member.caption #</em>
        # } else { #
            #: member.caption #
        # } #
    </script>
```

```Razor TagHelper
    <kendo-pivotgrid name="pivotgrid" 
                     column-width="200"
                     height="570"
                     row-header-template-id="headerTemplate">
        // Other configuration.
    </kendo-pivotgrid>
    
    <script id="headerTemplate" type="text/x-kendo-tmpl">
        # if (!member.children.length) { #
            <em>#: member.caption #</em>
        # } else { #
            #: member.caption #
        # } #
    </script>
```

## See Also

* [Templates in the Telerik UI PivotGrid HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/pivotgrid/templates)
* [Server-side API](https://www.telerik.com/aspnet-core-ui/documentation/api/pivotgrid)