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

  • 3 min 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>