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