| title | page_title | description |
|---|---|---|
PivotGrid |
Configuration, methods and events of Kendo UI PivotGrid |
Code examples for PivotGrid UI widget configuration, learn how to use methods and which events to set once the grid UI widget detail is initialized and expanded. |
Represents the Kendo UI PivotGrid widget. Inherits from Widget.
The data source of the widget which is used to display values. Can be a JavaScript object which represents a valid data source configuration or an existing kendo.data.PivotDataSource instance.
If the dataSource option is set to a JavaScript object the widget will initialize a new kendo.data.PivotDataSource instance using that value as data source configuration.
If the dataSource option is an existing kendo.data.PivotDataSource instance the widget will use that instance and will not initialize a new one.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
<div id="pivotgrid"></div>
<script>
var dataSource = new kendo.data.PivotDataSource({
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
});
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: dataSource
});
</script>
If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the
data source is fired. By default the widget will bind to the data source specified in the configuration.
Setting
autoBindtofalseis useful when multiple widgets are bound to the same data source. Disabling automatic binding ensures that the shared data source doesn't make more than one request to the remote service.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
autoBind: false,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var dataSource = $("#pivotgrid").data("kendoPivotGrid").dataSource;
dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
</script>
If set to false the user will not be able to add/close/reorder current fields for columns/rows/measures.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
reorderable: false,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Configures the Kendo UI PivotGrid Excel export settings.
Specifies the file name of the exported Excel file.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
excel: {
fileName: "InternetSalesAmount.xlsx"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Enables or disables column filtering in the Excel file. Not to be mistaken with the pivotgrid filtering feature.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
excel: {
filterable: false
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
If set to true, the content will be forwarded to proxyURL even if the browser supports saving files locally.
The URL of the server side proxy which will stream the file to the end user.
Such browsers are IE version 9 and lower and Safari.
The developer is responsible for implementing the server-side proxy.
The proxy will receive a POST request with the following parameters in the request body:
- contentType: The MIME type of the file
- base64: The base-64 encoded file content
- fileName: The file name, as requested by the caller.
The proxy should return the decoded file with the "Content-Disposition" header set to
attachment; filename="<fileName.xslx>".
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
excel: {
proxyURL: "/save"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Configures the Kendo UI PivotGrid PDF export settings.
The author of the PDF document.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
author: "John Doe"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
A flag indicating whether to produce actual hyperlinks in the exported PDF file.
It's also possible to pass a CSS selector as argument. All matching links will be ignored.
Available in versions 2015.3.1020 and later
The creator of the PDF document.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
creator: "John Doe"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The date when the PDF document is created. Defaults to new Date().
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
date: new Date("2014/10/10")
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Specifies the file name of the exported PDF file.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
fileName: "Products.pdf"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
If set to true, the content will be forwarded to proxyURL even if the browser supports saving files locally.
Specifies the keywords of the exported PDF file.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
keywords: "northwind products"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Set to true to reverse the paper dimensions if needed such that width is the larger edge.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
landscape: true
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Specifies the margins of the page (numbers or strings with units). Supported units are "mm", "cm", "in" and "pt" (default).
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
margin: {
left: 10,
right: "10pt",
top: "10mm",
bottom: "1in"
}
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The bottom margin. Numbers are considered as "pt" units.
The left margin. Numbers are considered as "pt" units.
The right margin. Numbers are considered as "pt" units.
The top margin. Numbers are considered as "pt" units.
Specifies the paper size of the PDF document. The default "auto" means paper size is determined by content.
The size of the content in pixels will match the size of the output in points (1 pixel = 1/72 inch).
Supported values:
- A predefined size: "A4", "A3" etc
- An array of two numbers specifying the width and height in points (1pt = 1/72in)
- An array of two strings specifying the width and height in units. Supported units are "mm", "cm", "in" and "pt".
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
paperSize: ["20mm", "20mm"]
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The URL of the server side proxy which will stream the file to the end user.
A proxy will be used when the browser is not capable of saving files locally, for example, Internet Explorer 9 and Safari.
The developer is responsible for implementing the server-side proxy.
The proxy will receive a POST request with the following parameters in the request body:
- contentType: The MIME type of the file
- base64: The base-64 encoded file content
- fileName: The file name, as requested by the caller.
The proxy should return the decoded file with the "Content-Disposition" header set to
attachment; filename="<fileName.pdf>".
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
proxyURL: "/save"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
A name or keyword indicating where to display the document returned from the proxy.
If you want to display the document in a new window or iframe,
the proxy should set the "Content-Disposition" header to inline; filename="<fileName.pdf>".
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
forceProxy: true,
proxyURL: "/save",
proxyTarget: "_blank"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Sets the subject of the PDF file.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
subject: "Products"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
Sets the title of the PDF file.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdf: {
title: "Internet Sales Amount"
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
If set to true the user will be able to filter by using the field menu.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
filterable: true,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
If set to true the user could sort the pivotgrid by clicking the dimension fields. By default sorting is disabled.
Can be set to a JavaScript object which represents the sorting configuration.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
sortable: true,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
If set to true the user can get the pivotgrid in unsorted state by clicking the sorted dimension field.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
sortable: {
allowUnsort: false
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The width of the table columns. Value is treated as pixels.
This option defines the minimum width of the column. If the widget is wider then (column numbers * column width) then the columns will be wider then the defined value. This is done to occupy all available space in the widget wrapper.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
columnWidth: 200,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The height of the PivotGrid. Numeric values are treated as pixels.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: "550px",
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The template which renders the content of the column header cell. By default it renders the caption of the tuple member.
The fields which can be used in the template are:
- member - the member of the corresponding column header cell
- tuple - the tuple of the corresponding column header cell
For information about the tuple structure check this link.
<div id="pivotgrid"></div>
<script id="columnTemplate" type="text/x-kendo-template">
# if (member.name === "[Date].[Calendar].[Year].&[2005]") { #
<em>#: member.caption #</em>
# } else { #
#: member.caption #
# } #
</script>
<script>
$("#pivotgrid").kendoPivotGrid({
columnHeaderTemplate: $("#columnTemplate").html(),
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true } ],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The template which renders the content of the data cell. By default renders the formatted value (fmtValue) of the data item.
The fields which can be used in the template are:
- 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
For information about the tuple structure check this link. About the data item structure review this help topic.
<div id="pivotgrid"></div>
<script id="dataCellTemplate" type="text/x-kendo-template">
# if (columnTuple.members[0].name === "[Date].[Calendar].[Year].&[2005]") { #
<em>#: kendo.toString(kendo.parseFloat(dataItem.value), "c2") #</em>
# } else { #
#: kendo.toString(kendo.parseFloat(dataItem.value), "c2") #
# } #
</script>
<script>
$("#pivotgrid").kendoPivotGrid({
dataCellTemplate: $("#dataCellTemplate").html(),
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true } ],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The template which renders the content of the KPI Status value. By default renders "open", "hold" and "denied" status icons.
The fields which can be used in the template are:
- 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
For information about the tuple structure check this link. About the data item structure review this help topic.
<div id="pivotgrid"></div>
<script id="kpiStatusTemplate" type="text/x-kendo-template">
# if (dataItem.value !== 0) { #
<em>Open/Denied</em>
# } else { #
<strong>Hold</strong>
# } #
</script>
<script>
$("#pivotgrid").kendoPivotGrid({
kpiStatusTemplate: $("#kpiStatusTemplate").html(),
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true } ],
measures: ["[Measures].[Internet Revenue Status]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The template which renders the content of the KPI Trend value. By default renders "increase", "decrease" and "equal" status icons.
The fields which can be used in the template are:
- 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
For information about the tuple structure check this link. About the data item structure review this help topic.
<div id="pivotgrid"></div>
<script id="kpiTrendTemplate" type="text/x-kendo-template">
# if (dataItem.value !== 0) { #
<em>Increase/Decrease</em>
# } else { #
<strong>Equal</strong>
# } #
</script>
<script>
$("#pivotgrid").kendoPivotGrid({
kpiTrendTemplate: $("#kpiTrendTemplate").html(),
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true } ],
measures: ["[Measures].[Internet Revenue Trend]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The template which renders the content of the row header cell. By default it renders the caption of the tuple member.
The fields which can be used in the template are:
- member - the member of the corresponding row header cell
- tuple - the tuple of the corresponding row header cell
For information about the tuple structure check this link.
<div id="pivotgrid"></div>
<script id="rowTemplate" type="text/x-kendo-template">
# if (member.name === "[Date].[Calendar].[Year].&[2005]") { #
<em>#: member.caption #</em>
# } else { #
#: member.caption #
# } #
</script>
<script>
$("#pivotgrid").kendoPivotGrid({
rowHeaderTemplate: $("#rowTemplate").html(),
dataSource: {
type: "xmla",
rows: [{ name: "[Date].[Calendar]", expand: true } ],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages displayed in the fields sections.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
messages: {
measureFields: "Drop Measure Here",
columnFields: "Drop Column Here",
rowFields: "Drop Rows Here"
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages displayed in the measure fields sections.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
messages: {
measureFields: "Drop Measure Here"
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages displayed in the column fields sections.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
messages: {
columnFields: "Drop Column Here"
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages displayed in the row fields sections.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
messages: {
rowFields: "Drop Rows Here"
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages displayed in the field menu.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
info: "Show items with value that:",
sortAscending: "Sort Ascending",
sortDescending: "Sort Descending",
filterFields: "Fields Filter",
filter: "Filter",
include: "Include Fields...",
title: "Fields to include",
clear: "Clear",
ok: "Ok",
cancel: "Cancel"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages displayed in fields filter.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
info: "Filter items by field name:"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text message displayed for the menu item which performs ascending sort.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
sortable: true,
height: 550,
messages: {
fieldMenu: {
sortAscending: "Sort (asc)"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text message displayed for the menu item which performs descending sort.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
sortable: true,
height: 550,
messages: {
fieldMenu: {
sortDescending: "Sort (desc)"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages of the fields filter menu item.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
filterFields: "Filter current field"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages of the filter button.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
filter: "Done"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text messages of the include menu item.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
include: "Choose fields to include"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The title of the include fields dialog.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
title: "Choose fields to include"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the clear filter expressions button.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
clear: "Clear filter expressions"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the OK button in the include fields dialog.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
ok: "Done"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the cancel button in the include fields dialog.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
cancel: "Close"
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the filter operators displayed in the filter menu.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
operators: {
contains: "Contains",
doesnotcontain: "Does not contain",
startswith: "Starts with",
endswith: "Ends with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the "contains" filter operator.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
operators: {
contains: "Contains"
}
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the "Does not contain" filter operator.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
operators: {
doesnotcontain: "Doesn't contain"
}
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the "Starts with" filter operator.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
operators: {
startswith: "Starts"
}
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the "Ends with" filter operator.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
operators: {
endswith: "Ends"
}
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the "equal" filter operator.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
operators: {
eq: "Equal to"
}
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The text of the "not equal" filter operator.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
filterable: true,
height: 550,
messages: {
fieldMenu: {
operators: {
neq: "Not equal to"
}
}
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
The data source of the widget. Configured via the dataSource option.
Changes of the data source will be reflected in the widget.
Assigning a new data source would have no effect. Use the setDataSource method instead.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
//get reference to the widget data source
var dataSource = $("#pivotgrid").data("kendoPivotGrid").dataSource;
</script>
Returns an information about a data cell at a specific column and row index.
The index of the column cell that crosses the data cell.
The index of the row cell that crosses the data cell.
Object the data cell information.
The fields of the result object:
- columnTuple - the tuple of the corresponding column header cell
- rowTuple - the tuple of the corresponding row header cell
- measure - the measure value of the data cell
- dataItem - the data item itself
<button id="get">Get info</button>
<div id="pivotgrid"></div>
<script>
$(function() {
var pivotgrid = $("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true } ],
rows: [{ name: "[Product].[Category]", expand: true }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
}).data("kendoPivotGrid");
$("#button").click(function() {
var columnIndex = 1; //2006
var rowIndex = 1; //Bikes
var info = pivotgrid.cellInfo(columnIndex, rowIndex); //retrieve data cell information
console.log(info);
});
});
</script>
Returns an information about for a specific data cell element
A string, DOM element or jQuery object which represents the data table cell. A string is treated as a jQuery selector.
Object the data cell information.
The fields of the result object:
- columnTuple - the tuple of the corresponding column header cell
- rowTuple - the tuple of the corresponding row header cell
- measure - the measure value of the data cell
- dataItem - the data item itself
<div id="pivotgrid"></div>
<script>
$(function() {
var pivotgrid = $("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true } ],
rows: [{ name: "[Product].[Category]", expand: true }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
}).data("kendoPivotGrid");
pivotgrid.wrapper.on("mouseenter", ".k-grid-content td", function(e){
var info = pivotgrid.cellInfoByElement(e.currentTarget);
console.log(info);
});
});
</script>
Prepares the widget for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.
This method does not remove the widget element from DOM.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.destroy();
</script>
Renders all content using the current data items.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.refresh();
</script>
Sets the data source of the widget.
The data source to which the widget should be bound.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var dataSource = kendo.data.PivotDataSource({
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.setDataSource(dataSource);
</script>
Initiates the Excel export. Also fires the excelExport event.
Calling this method could trigger the browser built-in popup blocker in some cases. To avoid that, always call it as a response to an end-user action e.g. button click.
<button id="export">Export to Excel</button>
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
$("#export").click(function(e) {
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.saveAsExcel();
});
</script>
Initiates the PDF export and returns a promise. Also triggers the pdfExport event.
Calling this method may trip the built-in browser pop-up blocker. To avoid that, call this method as a response to an end-user action, e.g. a button click.
Promise A promise that will be resolved when the export completes. The same promise is available in the pdfExport event arguments.
<button id="export">Export to PDF</button>
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
$("#export").click(function(e) {
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.saveAsPDF();
});
</script>
Fired before the widget binds to its data source.
The event handler function context (available via the this keyword) will be set to the widget instance.
If invoked prevents the data bind action. The PivotGrid will remain unchanged and dataBound event will not fire.
The widget instance which fired the event.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataBinding: function(e) {
e.preventDefault(); //this will prevent the data bind action
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
<div id="pivotgrid"></div>
<script>
function dataBinding(e) {
e.preventDefault();
}
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.bind("dataBinding", dataBinding);
</script>
Fired after the widget is bound to the data from its data source.
The event handler function context (available via the this keyword) will be set to the widget instance.
The widget instance which fired the event.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataBound: function(e) {
console.log("data bound");
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
<div id="pivotgrid"></div>
<script>
function dataBound(e) {
console.log("data bound");
}
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.bind("dataBound", dataBound);
</script>
Fired before column or row field is expanded.
The event handler function context (available via the this keyword) will be set to the widget instance.
If invoked prevents the expand and the widget will remain in its current state.
The widget instance which fired the event.
The axis that will be expanded. Possible values columns or rows.
The path to the field that will be expanded.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
expandMember: function(e) {
console.log("expand member");
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
<div id="pivotgrid"></div>
<script>
function expandMember(e) {
console.log("expand member");
}
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.bind("expandMember", expandMember);
</script>
Fired before column or row field is collapsed.
The event handler function context (available via the this keyword) will be set to the widget instance.
If invoked prevents the collapse and the widget will remain in its current state.
The widget instance which fired the event.
The axis that will be collapsed. Possible values columns or rows.
The path to the field that will be collapsed.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
collapseMember: function(e) {
console.log("collapse member");
},
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
</script>
<div id="pivotgrid"></div>
<script>
function collapseMember(e) {
console.log("collapse member");
}
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.bind("collapseMember", collapseMember);
</script>
Fired when saveAsExcel method is called.
The widget instance which fired the event.
The array of data items used to create the Excel workbook.
The Excel workbook configuration object. Used to initialize a kendo.ooxml.Workbook class. Modifications of the workbook will reflect in the output Excel document.
If invoked the grid will not save the generated file.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
columns: [
{ field: "name" }
],
dataSource: [
{ name: "Jane Doe"},
{ name: "John Doe"}
],
excelExport: function(e) {
e.workbook.fileName = "Grid.xslx";
}
});
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
</script>
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
excelExport: function(e) {
e.workbook.fileName = "Grid.xslx";
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.saveAsExcel();
</script>
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.bind("excelExport", function(e) {
e.workbook.fileName = "Grid.xslx";
});
pivotgrid.saveAsExcel();
</script>
Fired when the user clicks the "Export to PDF" toolbar button.
The widget instance which fired the event.
If invoked the grid will not save the generated file.
A promise that will be resolved when the export completes.
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
pdfExport: function(e) {
alert("PDF export");
},
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.saveAsPDF();
</script>
<div id="pivotgrid"></div>
<script>
$("#pivotgrid").kendoPivotGrid({
height: 550,
dataSource: {
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Geography].[City]" } ],
rows: [{ name: "[Product].[Product]" }],
measures: ["[Measures].[Internet Sales Amount]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: {
url: "http://demos.telerik.com/olap/msmdpump.dll",
dataType: "text",
contentType: "text/xml",
type: "POST"
}
},
schema: {
type: "xmla"
}
}
});
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");
pivotgrid.bind("pdfExport", function(e) {
alert("PDF export");
});
pivotgrid.saveAsPDF();
</script>