How to: Display Underlying Records

Dec 17, 2020
4 minutes to read

The ASPxPivotGrid includes the drill-down capability, which enables you to retrieve a list of records that were used to calculate a particular summary.To obtain drill-down data, use the pivot grid's CreateDrillDownDataSource method. Its parameters completely identify a summary cell.In this example, an end-user can view records from the control's underlying data source, associated with a summary cell, by clicking on it. The obtained data is displayed by the ASPxGridView within a popup window.

View Example

using System;
using DevExpress.Web.ASPxGridView;

namespace DisplayUnderlyingRecords {
    public partial class _Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            string columnIndexValue = ColumnIndex.Value,
                      rowIndexValue = RowIndex.Value;            
            if (ASPxGridView1.IsCallback && 
                !string.IsNullOrEmpty(columnIndexValue) && !string.IsNullOrEmpty(rowIndexValue))
            {
                BindGridView(columnIndexValue, rowIndexValue);                
                ASPxGridView1.JSProperties.Add("cpShowDrillDownWindow", false);
            }
        }
        protected void ASPxGridView1_CustomCallback(object sender, 
            ASPxGridViewCustomCallbackEventArgs e) {
            if (e.Parameters == "D")
            {
                ASPxGridView1.PageIndex = 0;
                ASPxGridView1.JSProperties["cpShowDrillDownWindow"] = true;
            }
        }
        protected void BindGridView(string columnIndex, string rowIndex) {
            ASPxGridView1.DataSource = 
                ASPxPivotGrid1.CreateDrillDownDataSource(Int32.Parse(columnIndex), 
                                                         Int32.Parse(rowIndex));
            ASPxGridView1.DataBind();
        }

    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
           Inherits="DisplayUnderlyingRecords._Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0,
           Culture=neutral, PublicKeyToken=b88d1754d700e49a"
           Namespace="DevExpress.Web.ASPxGridView"
           TagPrefix="dxwgv" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0,
         Culture=neutral, PublicKeyToken=b88d1754d700e49a"
         Namespace="DevExpress.Web.ASPxPopupControl"
         TagPrefix="dxpc" %>

<%@ Register assembly="DevExpress.Web.ASPxPivotGrid.v13.1, Version=13.1.8.0,
         Culture=neutral, PublicKeyToken=b88d1754d700e49a"
         namespace="DevExpress.Web.ASPxPivotGrid"
         tagprefix="dxwpg" %>

<%@ Register assembly="DevExpress.Web.v13.1, Version=13.1.8.0,
         Culture=neutral, PublicKeyToken=b88d1754d700e49a"
         namespace="DevExpress.Web.ASPxEditors"
         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">
    <input runat="server" id="ColumnIndex" type="hidden" enableviewstate="true" />
    <input runat="server" id="RowIndex" type="hidden" enableviewstate="true" />
    <div>
        <dxwpg:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server"
            DataSourceID="AccessDataSource1"            
            ClientInstanceName="PivotGrid" ClientIDMode="AutoID">
            <Styles>
                <CellStyle Cursor="pointer">
                </CellStyle>
            </Styles>
            <Fields>
                <dxwpg:PivotGridField Area="RowArea" AreaIndex="0"
                    Caption="Customer" FieldName="CompanyName"
                    ID="fieldCompanyName">
                </dxwpg:PivotGridField>
                <dxwpg:PivotGridField Area="ColumnArea" AreaIndex="0"
                    Caption="Year" FieldName="OrderDate"
                    UnboundFieldName="Year"
                    GroupInterval="DateYear"
                    ID="fieldOrderDate">
                </dxwpg:PivotGridField>
                <dxwpg:PivotGridField Area="DataArea" AreaIndex="0"
                    FieldName="ProductAmount"
                    Caption="Product Amount"
                    ID="fieldProductAmount">
                </dxwpg:PivotGridField>
                <dxwpg:PivotGridField Area="RowArea" AreaIndex="1"
                    Caption="Products" FieldName="ProductName"
                    ID="fieldProductName">
                </dxwpg:PivotGridField>
            </Fields>
            <ClientSideEvents CellClick="function(s, e) {
                var columnIndex = document.getElementById('ColumnIndex'),
                    rowIndex = document.getElementById('RowIndex');
                columnIndex.value = e.ColumnIndex;
                rowIndex.value = e.RowIndex;
                GridView.PerformCallback('D'); 
            }" />
            <OptionsView ShowFilterHeaders="False" />
        </dxwpg:ASPxPivotGrid>
        <dxpc:ASPxPopupControl ID="ASPxPopupControl1" runat="server"
              Left="200" Top="200" CloseAction="CloseButton"
              ClientInstanceName="DrillDownWindow"
              HeaderText="Drill Down Window"
              Width="153px"  Height="1px"
              AllowDragging="True">
            <ContentCollection>
                <dxpc:PopupControlContentControl runat="server">
                    <dxwgv:ASPxGridView ID="ASPxGridView1" runat="server"
                          OnCustomCallback="ASPxGridView1_CustomCallback"
                          ClientInstanceName="GridView"
                          AutoGenerateColumns="True">
                        <ClientSideEvents EndCallback="function(s, e) {
                        if( s.cpShowDrillDownWindow )                            
                            DrillDownWindow.ShowAtPos ( PivotGrid.GetMainElement().clientLeft, 
                            PivotGrid.GetMainElement().clientTop );
                          }" />                        
                        <SettingsLoadingPanel Mode="ShowOnStatusBar" />                        
                    </dxwgv:ASPxGridView>
                </dxpc:PopupControlContentControl>
            </ContentCollection>
        </dxpc:ASPxPopupControl>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server"
            DataFile="~/App_Data/nwind.mdb"
            SelectCommand="SELECT * FROM [CustomerReports]"
            DataSourceMode="DataReader" />  
    </div>
    </form>
</body>
</html>

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb"
           Inherits="DisplayUnderlyingRecords._Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0,
           Culture=neutral, PublicKeyToken=b88d1754d700e49a"
           Namespace="DevExpress.Web.ASPxGridView"
           TagPrefix="dxwgv" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0,
         Culture=neutral, PublicKeyToken=b88d1754d700e49a"
         Namespace="DevExpress.Web.ASPxPopupControl"
         TagPrefix="dxpc" %>

<%@ Register assembly="DevExpress.Web.ASPxPivotGrid.v13.1, Version=13.1.8.0,
         Culture=neutral, PublicKeyToken=b88d1754d700e49a"
         namespace="DevExpress.Web.ASPxPivotGrid"
         tagprefix="dxwpg" %>

<%@ Register assembly="DevExpress.Web.v13.1, Version=13.1.8.0,
         Culture=neutral, PublicKeyToken=b88d1754d700e49a"
         namespace="DevExpress.Web.ASPxEditors"
         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">
    <input runat="server" id="ColumnIndex" type="hidden" enableviewstate="true" />
    <input runat="server" id="RowIndex" type="hidden" enableviewstate="true" />
    <div>
        <dxwpg:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server"
            DataSourceID="AccessDataSource1"            
            ClientInstanceName="PivotGrid" ClientIDMode="AutoID">
            <Styles>
                <CellStyle Cursor="pointer">
                </CellStyle>
            </Styles>
            <Fields>
                <dxwpg:PivotGridField Area="RowArea" AreaIndex="0"
                    Caption="Customer" FieldName="CompanyName"
                    ID="fieldCompanyName">
                </dxwpg:PivotGridField>
                <dxwpg:PivotGridField Area="ColumnArea" AreaIndex="0"
                    Caption="Year" FieldName="OrderDate"
                    UnboundFieldName="Year"
                    GroupInterval="DateYear"
                    ID="fieldOrderDate">
                </dxwpg:PivotGridField>
                <dxwpg:PivotGridField Area="DataArea" AreaIndex="0"
                    FieldName="ProductAmount"
                    Caption="Product Amount"
                    ID="fieldProductAmount">
                </dxwpg:PivotGridField>
                <dxwpg:PivotGridField Area="RowArea" AreaIndex="1"
                    Caption="Products" FieldName="ProductName"
                    ID="fieldProductName">
                </dxwpg:PivotGridField>
            </Fields>
            <ClientSideEvents CellClick="function(s, e) {
                var columnIndex = document.getElementById('ColumnIndex'),
                    rowIndex = document.getElementById('RowIndex');
                columnIndex.value = e.ColumnIndex;
                rowIndex.value = e.RowIndex;
                GridView.PerformCallback('D'); 
            }" />
            <OptionsView ShowFilterHeaders="False" />
        </dxwpg:ASPxPivotGrid>
        <dxpc:ASPxPopupControl ID="ASPxPopupControl1" runat="server"
              Left="200" Top="200" CloseAction="CloseButton"
              ClientInstanceName="DrillDownWindow"
              HeaderText="Drill Down Window"
              Width="153px"  Height="1px"
              AllowDragging="True">
            <ContentCollection>
                <dxpc:PopupControlContentControl runat="server">
                    <dxwgv:ASPxGridView ID="ASPxGridView1" runat="server"
                          OnCustomCallback="ASPxGridView1_CustomCallback"
                          ClientInstanceName="GridView"
                          AutoGenerateColumns="True">
                        <ClientSideEvents EndCallback="function(s, e) {
                        if( s.cpShowDrillDownWindow )                            
                            DrillDownWindow.ShowAtPos ( PivotGrid.GetMainElement().clientLeft, 
                            PivotGrid.GetMainElement().clientTop );
                          }" />                        
                        <SettingsLoadingPanel Mode="ShowOnStatusBar" />                        
                    </dxwgv:ASPxGridView>
                </dxpc:PopupControlContentControl>
            </ContentCollection>
        </dxpc:ASPxPopupControl>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server"
            DataFile="~/App_Data/nwind.mdb"
            SelectCommand="SELECT * FROM [CustomerReports]"
            DataSourceMode="DataReader" />  
    </div>
    </form>
</body>
</html>

Imports System
Imports DevExpress.Web.ASPxGridView

Namespace DisplayUnderlyingRecords
    Partial Public Class _Default
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            Dim columnIndexValue As String = ColumnIndex.Value, rowIndexValue As String = RowIndex.Value
            If ASPxGridView1.IsCallback AndAlso (Not String.IsNullOrEmpty(columnIndexValue)) _
                AndAlso (Not String.IsNullOrEmpty(rowIndexValue)) Then
                BindGridView(columnIndexValue, rowIndexValue)
                ASPxGridView1.JSProperties.Add("cpShowDrillDownWindow", False)
            End If
        End Sub
        Protected Sub ASPxGridView1_CustomCallback(ByVal sender As Object, _
                                                   ByVal e As ASPxGridViewCustomCallbackEventArgs)
            If e.Parameters = "D" Then
                ASPxGridView1.PageIndex = 0
                ASPxGridView1.JSProperties("cpShowDrillDownWindow") = True
            End If
        End Sub
        Protected Sub BindGridView(ByVal columnIndex As String, ByVal rowIndex As String)
            ASPxGridView1.DataSource =
                ASPxPivotGrid1.CreateDrillDownDataSource(Int32.Parse(columnIndex), _
                                                         Int32.Parse(rowIndex))
            ASPxGridView1.DataBind()
        End Sub

    End Class
End Namespace

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode