|
| 1 | +--- |
| 2 | +title: Data Binding |
| 3 | +page_title: PivotGrid Data Binding |
| 4 | +description: What are the different ways to provide data to the Telerik UI for Blazor PivotGrid. Information about XMLA datasource, local data. |
| 5 | +slug: pivotgrid-data-binding |
| 6 | +tags: telerik,blazor,pivotgrid |
| 7 | +published: True |
| 8 | +position: 10 |
| 9 | +--- |
| 10 | + |
| 11 | +# PivotGrid Data Binding |
| 12 | + |
| 13 | +This article describes the PivotGrid data binding mechanism and the supported data source options. |
| 14 | + |
| 15 | + |
| 16 | +## Data Provider Type |
| 17 | + |
| 18 | +The PivotGrid supports different data sources via its `DataProviderType` parameter. The parameter type is `PivotGridDataProviderType` enum and its members are: |
| 19 | + |
| 20 | +* [`Local`](#local) (default) |
| 21 | +* [`Xmla`](#xmla) |
| 22 | + |
| 23 | + |
| 24 | +## Local |
| 25 | + |
| 26 | +When bound to local data, the Pivot Grid requires its `Data` parameter to provide all the data at once as `IEnumerable<TItem>`. The component will perform all aggregate calculations in-memory and there is no [load on demand]({%slug pivotgrid-overview%}#pivotgrid-parameters). |
| 27 | + |
| 28 | +> Large amounts of local data may impact the performance, especially in WebAssembly applications. |
| 29 | +
|
| 30 | +>caption PivotGrid bound to Local data provider |
| 31 | +
|
| 32 | +````CSHTML |
| 33 | +<TelerikPivotGrid Data="@PivotData"> |
| 34 | + <PivotGridColumns> |
| 35 | + <PivotGridColumn Name="@nameof(PivotModel.City)" /> |
| 36 | + </PivotGridColumns> |
| 37 | + <PivotGridRows> |
| 38 | + <PivotGridRow Name="@nameof(PivotModel.Category)" /> |
| 39 | + <PivotGridRow Name="@nameof(PivotModel.Product)" /> |
| 40 | + </PivotGridRows> |
| 41 | + <PivotGridMeasures> |
| 42 | + <PivotGridMeasure Name="@nameof(PivotModel.ContractValue)" /> |
| 43 | + </PivotGridMeasures> |
| 44 | +</TelerikPivotGrid> |
| 45 | +
|
| 46 | +@code { |
| 47 | + private List<PivotModel> PivotData { get; set; } = new List<PivotModel>(); |
| 48 | +
|
| 49 | + protected override void OnInitialized() |
| 50 | + { |
| 51 | + var dataItemCount = 100; |
| 52 | + var categoryCount = 3; |
| 53 | + var productCount = 5 + 1; // effectively 5, as rnd.Next() will never return 6 |
| 54 | + var cityCount = 3 + 1; // effectively 3 |
| 55 | + var rnd = new Random(); |
| 56 | +
|
| 57 | + for (int i = 1; i <= dataItemCount; i++) |
| 58 | + { |
| 59 | + var productNumber = rnd.Next(1, productCount); |
| 60 | +
|
| 61 | + PivotData.Add(new PivotModel() |
| 62 | + { |
| 63 | + Category = $"Category {productNumber % categoryCount + 1}", |
| 64 | + Product = $"Product {productNumber}", |
| 65 | + City = $"City {rnd.Next(1, cityCount)}", |
| 66 | + ContractDate = DateTime.Now.AddDays(-rnd.Next(1, 31)).AddMonths(-rnd.Next(1, 12)).AddYears(-rnd.Next(0, 5)), |
| 67 | + ContractValue = rnd.Next(123, 987) |
| 68 | + }); |
| 69 | + } |
| 70 | +
|
| 71 | + base.OnInitialized(); |
| 72 | + } |
| 73 | +
|
| 74 | + public class PivotModel |
| 75 | + { |
| 76 | + public string Category { get; set; } = null!; |
| 77 | + public string Product { get; set; } = null!; |
| 78 | + public string City { get; set; } = null!; |
| 79 | + public DateTime ContractDate { get; set; } |
| 80 | + public decimal ContractValue { get; set; } |
| 81 | + } |
| 82 | +} |
| 83 | +```` |
| 84 | + |
| 85 | + |
| 86 | +## Xmla |
| 87 | + |
| 88 | +The PivotGrid supports binding to [XML for Analysis](https://learn.microsoft.com/en-us/analysis-services/xmla/xml-for-analysis-xmla-reference) data, for example an [OLAP cube](https://en.wikipedia.org/wiki/OLAP_cube). For more information about OLAP cubes, check [Just What Are Cubes Anyway? A Painless Introduction to OLAP Technology](https://learn.microsoft.com/en-us/previous-versions/office/developer/office-xp/aa140038(v=office.10)) by Microsoft. |
| 89 | + |
| 90 | +The PivotGrid provides nested Razor components to setup the XMLA connection. Use the `<PivotGridSettings>` tag and place one or both of the following inside it: |
| 91 | + |
| 92 | +* [`<PivotGridXmlaDataProviderSettings>`](#xmla-data-provider-settings) - configures the data server URL and database name |
| 93 | +* [`<PivotGridXmlaDataProviderCredentials>`](#xmla-data-provider-credentials) - configures optional access credentials |
| 94 | + |
| 95 | +### XMLA Data Provider Settings |
| 96 | + |
| 97 | +The `PivotGridXmlaDataProviderSettings` component exposes the following parameters. |
| 98 | + |
| 99 | +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) |
| 100 | + |
| 101 | +| Parameter | Type | Description | |
| 102 | +| --- | --- | --- | |
| 103 | +| `Catalog` | `string` | The initial dataset (batabase) name to connect to. | |
| 104 | +| `Cube` | `string` | The OLAP cube name. | |
| 105 | +| `ServerUrl` | `string` | The endpoint URL that provides [HTTP access to the XMLA Analysis Services](https://learn.microsoft.com/en-us/analysis-services/instances/configure-http-access-to-analysis-services-on-iis-8-0). If the endpoint is on a different domain, make sure to [configure CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). | |
| 106 | + |
| 107 | +>tip Setting up an OLAP cube is outside the scope of this documentation. You can start from [SQL Server Analysis Services](https://learn.microsoft.com/en-us/analysis-services/ssas-overview). |
| 108 | +
|
| 109 | +### XMLA Data Provider Credentials |
| 110 | + |
| 111 | +The `<PivotGridXmlaDataProviderCredentials>` component creates an object, which is similar to [`System.Net.NetworkCredential`](https://learn.microsoft.com/en-us/dotnet/api/system.net.networkcredential) and works in a similar way. It has the following parameters. |
| 112 | + |
| 113 | +| Parameter | Type | Description | |
| 114 | +| --- | --- | --- | |
| 115 | +| `Domain` | `string` | (optional) The domain, which verifies the credentials. | |
| 116 | +| `Password` | `string` | The password for the provided `Username`. | |
| 117 | +| `Username` | `string` | The user that requests access to the XMLA data. | |
| 118 | + |
| 119 | +### XMLA Data Binding Example |
| 120 | + |
| 121 | +>caption PivotGrid bound to XMLA data provider without credentials |
| 122 | +
|
| 123 | +````CSHTML |
| 124 | +<TelerikPivotGridContainer> |
| 125 | + <TelerikPivotGridConfigurator /> |
| 126 | +
|
| 127 | + <TelerikPivotGridConfiguratorButton /> |
| 128 | +
|
| 129 | + <TelerikPivotGrid DataProviderType="@PivotGridDataProviderType.Xmla" |
| 130 | + TItem="object"> |
| 131 | + <PivotGridSettings> |
| 132 | + <PivotGridXmlaDataProviderSettings ServerUrl="https://demos.telerik.com/olap/msmdpump.dll" |
| 133 | + Catalog="Adventure Works DW 2008R2" |
| 134 | + Cube="Adventure Works" /> |
| 135 | + </PivotGridSettings> |
| 136 | +
|
| 137 | + <PivotGridRows> |
| 138 | + <PivotGridRow Name="[Product].[Category]"></PivotGridRow> |
| 139 | + <PivotGridRow Name="[Product].[Model Name]"></PivotGridRow> |
| 140 | + </PivotGridRows> |
| 141 | +
|
| 142 | + <PivotGridColumns> |
| 143 | + <PivotGridColumn Name="[Date].[Calendar Quarter of Year]"></PivotGridColumn> |
| 144 | + <PivotGridColumn Name="[Date].[Calendar Year]"></PivotGridColumn> |
| 145 | + </PivotGridColumns> |
| 146 | +
|
| 147 | + <PivotGridMeasures> |
| 148 | + <PivotGridMeasure Name="[Measures].[Reseller Order Count]"></PivotGridMeasure> |
| 149 | + </PivotGridMeasures> |
| 150 | + </TelerikPivotGrid> |
| 151 | +</TelerikPivotGridContainer> |
| 152 | +```` |
| 153 | + |
| 154 | +## See Also |
| 155 | + |
| 156 | +* [Live PivotGrid Demos - Local Data Binding](https://demos.telerik.com/blazor-ui/pivotgrid/local-data-binding) |
| 157 | +* [Live PivotGrid Demos - OLAP (XMLA) Data Binding](https://demos.telerik.com/blazor-ui/pivotgrid/xmla-data-binding) |
| 158 | +* [PivotGrid API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPivotGrid-1) |
0 commit comments