aspnet-7239-components-pivot-grid-examples-data-shaping-how-to-display-underlying-records.md
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.
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