How to: Display KPI Graphics in ASPxPivotGrid Control Bound to a Regular Data Source

Dec 17, 2020
3 minutes to read

The following example shows how to display KPI graphics in ASPxPivotGrid control bound to a regular data source.

The ASPxPivotGrid control is bound to the “Sales Person” view in the Northwind database. To display KPI graphics, we create an unbound field whose values correspond to images contained within a KPI graphic set.

In this example, the unbound field values depend on the “Extended Price” field values: if the “Extended Price” field value is less than 100000, the unbound field value is “-1”, if the “Extended Price” field value is less than 150000, the unbound field value is “0”. In other cases, the unbound field value is “1”.

The PivotGridOptionsData.DataFieldUnboundExpressionMode property is set to DataFieldUnboundExpressionMode.UseSummaryValues to calculate unbound expressions for data fields against summary values. The PivotGridFieldBase.KPIGraphic property specifies a graphic set used to visualize unbound field values.

The following image shows the result of the KPI values visualization:

ex-ASP.Net-PivotGrid-RegularDataSorceKPI

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
Inherits="ASPxPivotGridRegularDataSourceKPI.WebForm1" %>

<%@ Register assembly="DevExpress.Web.ASPxPivotGrid.v14.1, Version=14.1.6.0, 
Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPivotGrid" 
tagprefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <dx:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server" ClientIDMode="AutoID" 
            DataSourceID="AccessDataSource1" Theme="DevEx">
            <Fields>
                <dx:PivotGridField ID="fieldCategoryName" Area="RowArea" AreaIndex="0" 
                    Caption="Category Name" FieldName="CategoryName">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldExtendedPrice" Area="DataArea" AreaIndex="0" 
                    FieldName="Extended Price">
                </dx:PivotGridField>
            </Fields>
        </dx:ASPxPivotGrid>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/App_Data/nwind.mdb" 
            SelectCommand="SELECT * FROM [SalesPerson]"></asp:AccessDataSource>

    </div>
    </form>
</body>
</html>

using System;
using DevExpress.Web.ASPxPivotGrid;

namespace ASPxPivotGridRegularDataSourceKPI
{
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack && !IsCallback)
            {
                // Specifies that unbound expressions for data fields are calculated against summary values.
                ASPxPivotGrid1.OptionsData.DataFieldUnboundExpressionMode =
                    DevExpress.XtraPivotGrid.DataFieldUnboundExpressionMode.UseSummaryValues;

                // Creates a new unbound "Status" field to show KPI values.
                PivotGridField fieldStatus = ASPxPivotGrid1.Fields.Add("Status",
                    DevExpress.XtraPivotGrid.PivotArea.DataArea);

                // Sets a column's unbound type and specifies an unbound expression.
                fieldStatus.UnboundType = DevExpress.Data.UnboundColumnType.Integer;
                fieldStatus.UnboundExpression = string.Format("(Iif([{0}]<100000,-1,Iif([{0}]<150000,0,1)))",
                    fieldExtendedPrice.ExpressionFieldName);

                // Sets the Data Header Area within which the "Status" Field can be positioned.
                fieldStatus.AllowedAreas = DevExpress.XtraPivotGrid.PivotGridAllowedAreas.DataArea;

                // Specifies a graphic set used to indicate KPI values.
                fieldStatus.KPIGraphic = DevExpress.XtraPivotGrid.PivotKPIGraphic.Faces;
            }
        }
    }
}

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" 
Inherits="ASPxPivotGridRegularDataSourceKPI.WebForm1" %>

<%@ Register assembly="DevExpress.Web.ASPxPivotGrid.v14.1, Version=14.1.6.0, 
Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPivotGrid" 
tagprefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <dx:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server" ClientIDMode="AutoID" 
            DataSourceID="AccessDataSource1" Theme="DevEx">
            <Fields>
                <dx:PivotGridField ID="fieldCategoryName" Area="RowArea" AreaIndex="0" 
                    Caption="Category Name" FieldName="CategoryName">
                </dx:PivotGridField>
                <dx:PivotGridField ID="fieldExtendedPrice" Area="DataArea" AreaIndex="0" 
                    FieldName="Extended Price">
                </dx:PivotGridField>
            </Fields>
        </dx:ASPxPivotGrid>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/App_Data/nwind.mdb" 
            SelectCommand="SELECT * FROM [SalesPerson]"></asp:AccessDataSource>

    </div>
    </form>
</body>
</html>

Imports System
Imports DevExpress.Web.ASPxPivotGrid

Namespace ASPxPivotGridRegularDataSourceKPI
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If (Not IsPostBack) AndAlso (Not IsCallback) Then
                ' Specifies that unbound expressions for data fields are calculated 
                ' against summary values.
                ASPxPivotGrid1.OptionsData.DataFieldUnboundExpressionMode =
                    DevExpress.XtraPivotGrid.DataFieldUnboundExpressionMode.UseSummaryValues

                ' Creates a new unbound "Status" field to show KPI values.
                Dim fieldStatus As PivotGridField = ASPxPivotGrid1.Fields.Add("Status", _
                                                         DevExpress.XtraPivotGrid.PivotArea.DataArea)

                ' Sets a column's unbound type and specifies an unbound expression.
                fieldStatus.UnboundType = DevExpress.Data.UnboundColumnType.Integer
                fieldStatus.UnboundExpression =
                    String.Format("(Iif([{0}]<100000,-1,Iif([{0}]<150000,0,1)))", _
                                  fieldExtendedPrice.ExpressionFieldName)

                ' Sets the Data Header Area within which the "Status" Field can be positioned.
                fieldStatus.AllowedAreas = DevExpress.XtraPivotGrid.PivotGridAllowedAreas.DataArea

                ' Specifies a graphic set used to indicate KPI values.
                fieldStatus.KPIGraphic = DevExpress.XtraPivotGrid.PivotKPIGraphic.Faces
            End If
        End Sub
    End Class
End Namespace

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode