This topic explains, in both conceptual and step-by-step form, how to add the igOlapFlatDataSource™ component to an ASP.NET MVC application using the ASP.NET MVC helper.
The following topics are prerequisites to understanding this topic:
igOlapFlatDataSource Overview: This topic provides conceptual information about the igOlapFlatDataSource component including its main features, minimum requirements, and user functionality.
Adding igOlapFlatDataSource to an HTML Page: This topic explains, in both conceptual and step-by-step form, how to add the igOlapFlatDataSource component to an HTML page.
This topic contains the following sections:
The igOlapFlatDataSource is a client-side component accompanied by an ASP.NET MVC helper that allows the component to be used in the CS/VB code of an MVC View. The ASP.NET MVC helper is the same for igOlapFlatDataSource and igOlapXmlaDataSource component and, depending on the options you set, an instance of the respective data source is created on the client. When using the helper, you provide it with an identifier that enables it to be used in one or more components capable of visualizing its data (igPivotDataSelector™, igPivotGrid™, igPivotView™).
Defining the igOlapFlatDataSource in the View is achieved by setting the required properties using methods that always return the same object that called them. This allows chaining syntax to be used for setting all required properties. For complex objects such as DataSourceOptions, lambda expression builders are used in order to achieve this kind of syntax.
Following are the general requirements for adding igOlapFlatDataSource to an ASP.NET MVC application:
Following are the general conceptual steps for adding igOlapFlatDataSource to an ASP.NET MVC application.
Adding the Infragistics namespace
Configuring the data for the View
Loading the required JavaScript resources
Adding the igOlapFlatDataSource
The procedure below demonstrates how to add the igOlapFlatDataSource component to an ASP.NET MVC application. The required resources in this example are referred to automatically with the Infragistics Loader.
To complete the procedure, you need the following:
Infragistics.Web.Mvc.dll assembly added to the application projectThe following steps demonstrate how to add an igOlapFlatDataSource to an ASP.NET MVC application.
Add the Infragistics namespace.
Add the Infragistics.Web.Mvc namespace to your View code.
In ASPX:
<%=Import Namespace=”Infragistics.Web.Mvc” %>
Configure the data for the View.
In the controller code, in the action method for the View, configure the View’s model:
In C#:
//…
var sales = new List<object>() {
new { ProductCategory = "Clothing", SellerName = "Stanley Brooker", UnitPrice = 12.814, UnitsSold = 282, SalesDate = DateTime.Today.ToShortDateString()},
new { ProductCategory = "Bikes", SellerName = "Elisa Longbottom", UnitPrice = 49.579, UnitsSold = 201, SalesDate = DateTime.Today.AddMonths(-14).ToShortDateString()},
new { ProductCategory = "Accessories", SellerName = "Erica Wild", UnitPrice = 3.565, UnitsSold = 68, SalesDate = DateTime.Today.AddMonths(-20).ToShortDateString()}
};
return View(sales);
Add a reference to the Infragistics namespace.
Add script reference to the Infragistics Loader component.
Add the following script reference to the head section of the View.
In ASPX:
<script src="[path to js folder]/infragistics.loader.js"></script>
Add the definition of the Infragistics Loader.
The following code loads the required resources using the Infragistics Loader.
In ASPX:
<%=Html.Infragistics()
.Loader()
.ScriptPath("[js path]")
.CssPath("[css path]")
.Render()
%>
Add the igOlapFlatDataSource component.
Add the igOlapFlatDataSource declaration setting the ID.
Add the declaration to the code of the View:
In ASPX:
<%=Html.Infragistics().OlapDataSource().ID("flatDataSource")
// remaining code goes here
%>
(Optional) Configure the common OLAP data source properties.
Use the DataSourceOptions method to set the properties that are common for both multidimensional (OLAP) data sources, e.g. columns, rows, measures.
In ASPX:
<%=Html.Infragistics().OlapDataSource().ID("flatDataSource")
.DataSourceOptions(dataSourceOptions => dataSourceOptions
.Columns("[SalesDate].[SalesDate]")
.Rows("[ProductCategory].[ProductCategory]")
.Measures("[Measures].[UnitPrice]"))
%>
Configure the igOlapFlatDataSource-specific properties.
The metadata property of the FlatDataOptions object is required. Its value defines how dimensions, hierarchies, levels, measures etc. will be generated for the input data. For details, refer to Defining Metadata (igOlapFlatDataSource).
In ASPX:
<%=Html.Infragistics().OlapDataSource().ID("flatDataSource")
.DataSourceOptions(dataSourceOptions => dataSourceOptions
// common properties
.FlatDataOptions(flatOptions => flatOptions.Metadata(
metadata => metadata.Cube(cube => cube.Name("Sales")
.MeasuresDimension(measuresDimension => measuresDimension.Measures(
measures =>
{
measures.AddMeasure().Name("UnitPrice").Caption("Unit Price").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitPrice')");
measures.AddMeasure().Name("UnitsSold").Caption("Units Sold").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')");
}))
.Dimensions(dimensions =>
{
dimensions.AddDimension().Name("Seller").Caption("Seller").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("Seller").Caption("Seller").Levels(levels =>
{
levels.AddLevel().Name("AllSellers").Caption("All Sellers")
.MemberProvider("function(item) {return 'All Sellers';}");
levels.AddLevel().Name("SellerName").Caption("Seller Name")
.MemberProvider("function(item) {return item.SellerName; }");
}));
dimensions.AddDimension().Name("SalesDate").Caption("Sales Date").Hierarchies(
hierarchies =>
{
hierarchies.AddHierarchy().Name("SalesDate").Caption("Sales Date").Levels(levels =>
{
levels.AddLevel().Name("AllPeriods").Caption("All Periods").MemberProvider("function(item) { return 'All Periods'; }");
levels.AddLevel().Name("Year").Caption("Year").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('year', 'SalesDate')");
levels.AddLevel().Name("Quarter").Caption("Quarter").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('quarter', 'SalesDate')");
levels.AddLevel().Name("Month").Caption("Month").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('month', 'SalesDate')");
levels.AddLevel().Name("Date").Caption("Date").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('date', 'SalesDate')");
});
});
dimensions.AddDimension().Name("ProductCategory").Caption("Product Category").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("ProductCategory").Caption("Product Category").Levels(levels =>
{
levels.AddLevel().Name("AllProducts").Caption("All Products")
.MemberProvider("function(item) {return 'All Products'; }");
levels.AddLevel().Name("ProductCategory").Caption("Product Category")
.MemberProvider("function(item) {return item.ProductCategory; }");
}));
})))
%>
Set the data source to the View’s model.
Set the data source to the model you provided in the controller. Next, call the DataBind method to send the model data to the client.
In ASPX:
<%= Html.Infragistics().OlapDataSource().ID("flatDataSource").DataSourceOptions(
dataSourceOptions => dataSourceOptions.FlatDataOptions(
// flat data options
).DataSource(this.Model).DataBind()))
%>
Render the JavaScript code.
To render the JavaScript code according to the setup that you provided, call the Render method.
In ASPX:
<%= Html.Infragistics().OlapDataSource().ID("flatDataSource")
// all options
.Render()
%>
At this point, you can use the ID which you set to the OlapDataSource definition, in order to use the data source component instance in pivot-grid-related controls like igPivotDataSelector, igPivotGrid, and igPivotView.
Following is the complete code of this procedure.
In ASPX:
<%= Html.Infragistics().OlapDataSource().ID("flatDataSource")
.DataSourceOptions(
dataSourceOptions => dataSourceOptions
.Columns("[SalesDate].[SalesDate]")
.Rows("[ProductCategory].[ProductCategory]")
.Measures("[Measures].[UnitPrice]")
.FlatDataOptions(flatOptions => flatOptions.Metadata(
metadata => metadata.Cube(cube => cube.Name("Sales")
.MeasuresDimension(measuresDimension => measuresDimension.Measures(
measures =>
{
measures.AddMeasure().Name("UnitPrice").Caption("Unit Price").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitPrice')");
measures.AddMeasure().Name("UnitsSold").Caption("Units Sold").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')");
}))
.Dimensions(dimensions =>
{
dimensions.AddDimension().Name("Seller").Caption("Seller").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("Seller").Caption("Seller").Levels(levels =>
{
levels.AddLevel().Name("AllSellers").Caption("All Sellers")
.MemberProvider("function(item) {return 'All Sellers';}");
levels.AddLevel().Name("SellerName").Caption("Seller Name")
.MemberProvider("function(item) {return item.SellerName; }");
}));
dimensions.AddDimension().Name("SalesDate").Caption("Sales Date").Hierarchies(
hierarchies =>
{
hierarchies.AddHierarchy().Name("SalesDate").Caption("Sales Date").Levels(levels =>
{
levels.AddLevel().Name("AllPeriods").Caption("All Periods").MemberProvider("function(item) { return 'All Periods'; }");
levels.AddLevel().Name("Year").Caption("Year").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('year', 'SalesDate')");
levels.AddLevel().Name("Quarter").Caption("Quarter").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('quarter', 'SalesDate')");
levels.AddLevel().Name("Month").Caption("Month").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('month', 'SalesDate')");
levels.AddLevel().Name("Date").Caption("Date").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('date', 'SalesDate')");
});
});
dimensions.AddDimension().Name("ProductCategory").Caption("Product Category").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("ProductCategory").Caption("Product Category").Levels(levels =>
{
levels.AddLevel().Name("AllProducts").Caption("All Products")
.MemberProvider("function(item) {return 'All Products'; }");
levels.AddLevel().Name("ProductCategory").Caption("Product Category")
.MemberProvider("function(item) {return item.ProductCategory; }");
}));
})))
.DataSource(this.Model)
.DataBind()))
.Render()
%>
The following topics provide additional information related to this topic.
Adding igPivotDataSelector to an ASP.NET MVC Application: This topic explains, in both conceptual and step-by-step form, how to add the igPivotDataSelector control to an ASP.NET MVC application using the ASP.NET MVC helper.
Adding igPivotGrid to an ASP.NET MVC Application: This topic explains, in both conceptual and step-by-step form, how to add the igPivotGrid control to an ASP.NET MVC application using the ASP.NET MVC helper.
Adding igPivotView to an ASP.NET MVC Application: This topic explains, in both conceptual and step-by-step form, how to add the igPivotView control to an ASP.NET MVC View using the ASP.NET MVC helper.
The following samples provide additional information related to this topic.
igOlapFlatDataSource and how to use this data source in igPivotDataSelector and igPivotGrid.View on GitHub