New to Kendo UI for jQuery? Start a free 30-day trial
Render the Row Header Captions of the PivotGrid As Anchors
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 render the header captions of the PivotGrid as anchors?
Solution
To render column and cell caption fields as anchors, use the columnHeaderTemplate or the dataCellTemplate options respectively.
To render row header caption fields as anchors, use the rowHeaderTemplate option. The following example demonstrates how to achieve this behavior.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="pivotgrid"></div>
<script id="headerTemplate" type="text/x-kendo-tmpl">
# if (!member.children.length && member.parentName === "ProductName") { #
<a href="https://www.telerik.com">#: member.caption #</a>
# } else { #
#: member.caption #
# } #
</script>
<script>
$(document).ready(function () {
var pivotgrid = $("#pivotgrid").kendoPivotGrid({
rowHeaderTemplate: $("#headerTemplate").html(),
columnWidth: 120,
height: 570,
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" },
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" }
}
}
},
rows: [{ name: "CategoryName", expand: true }, { name: "ProductName" } ],
columns: [{ name: "Discontinued", expand: true }],
measures: ["Sum"]
}
}).data("kendoPivotGrid");
$("#configurator").kendoPivotConfigurator({
dataSource: pivotgrid.dataSource,
height: 570
});
});
</script>
</div>