Drill-Down

• Jul 12, 2019
• 3 minutes to read

Dashboard provides the Drill-Down feature, which allows end-users to change the detail level of data displayed in a dashboard item. Drill-Down enables users to drill down to display detail data, or drill up to view more general information.

The image below shows how to drill down in the Chart dashboard item to view detailed information for the Mobile bar column:

The following dashboard items support the Drill-Down feature:

• Chart
• Scatter Chart
• Grid
• Pies
• Cards
• Gauges
• Treemap

Enable Drill-Down

Drill-down requires that the data section in the dashboard item’s Binding menu contains several dimensions…

… or a hierarchy data item (in OLAP mode).

To be able to change the detail level of data, go to the dashboard item’s Interactivity menu and enable the Drill Down option.

Perform Drill-Down

The following table lists members you can use to perform drill-down / drill-up in code.

ASPxClientDashboard	HTML JavaScript control	Description
ASPxClientDashboard.GetAvailableDrillDownValues	ViewerApiExtension.getAvailableDrillDownValues	Obtains values that can be used to perform drill-down.
ASPxClientDashboard.PerformDrillDown	ViewerApiExtension.performDrillDown	Performs a drill-down into the required element by its value.
ASPxClientDashboard.PerformDrillUp	ViewerApiExtension.performDrillUp	Performs a drill-up for the specified dashboard item.
ASPxClientDashboard.ItemDrillDownStateChanged	ViewerApiExtensionOptions.onItemDrillDownStateChanged	An event that occurs when a drill-down/drill-up is performed.
ASPxClientDashboardItemDrillDownStateChangedEventArgs.Action	ItemDrillDownStateChangedEventArgs.action	Allows you to get the drill-down action performed in the dashboard item.
ASPxClientDashboardItemDrillDownStateChangedEventArgs.Values	ItemDrillDownStateChangedEventArgs.values	Allows you to obtain values from the current drill-down hierarchy.

The image below illustrates how drill-down works. The action and values property allows you to get information about an accomplished action:

Note

In OLAP mode, the ASPxClientDashboardItemDrillDownStateChangedEventArgs.Values/ ItemDrillDownStateChangedEventArgs.values properties return unique names instead of values.

Example

The following example demonstrates how to perform a drill-down in ASPxDashboard on the client side.

In this example, the ASPxClientDashboard.PerformDrillDown method is used to perform a drill-down for a specified row in a Grid dashboard item. The dxSelectBox widget contains categories for which a drill-down can be performed. These categories are obtained using the ASPxClientDashboard.GetAvailableDrillDownValues method. Select a required category and click the Perform Drill-Down button to perform a drill-down by the selected category.

When the Grid displays a list of products (the bottom-most detail level), you can only perform a drill-up action that returns you to the top detail level. The ASPxClientDashboard.PerformDrillUp method is called to do this.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspxdashboard-how-to-perform-a-drill-down-in-code-t495048.

VB.NET

Dim access97Params As New Access97ConnectionParameters()
access97Params.FileName = "..\..\Data\nwind.mdb"

Dim sqlDataSource As New DashboardSqlDataSource("SQL Data Source 1", access97Params)
Dim selectQuery As SelectQuery = SelectQueryFluentBuilder.AddTable("SalesPerson"). _
    SelectColumns("CategoryName", "Sales Person", "OrderDate", "Extended Price").Build("Query 1")
sqlDataSource.Queries.Add(selectQuery)
sqlDataSource.Fill()

dashboardDesigner1.Dashboard.DataSources.Add(sqlDataSource)

C#

Access97ConnectionParameters access97Params = new Access97ConnectionParameters();
access97Params.FileName = @"..\..\Data\nwind.mdb";

DashboardSqlDataSource sqlDataSource = 
    new DashboardSqlDataSource("SQL Data Source 1", access97Params);
SelectQuery selectQuery = SelectQueryFluentBuilder
    .AddTable("SalesPerson")
    .SelectColumns("CategoryName", "Sales Person", "OrderDate", "Extended Price")
    .Build("Query 1");
sqlDataSource.Queries.Add(selectQuery);
sqlDataSource.Fill();

dashboardDesigner1.Dashboard.DataSources.Add(sqlDataSource);

DrillDown.js

function initializeControls() {
    $("#buttonContainer").dxButton({
        onClick: performDrillAction,
    });

    $("#selectBox").dxSelectBox({
        dataSource: getDrillDownValues(),
        value: getDrillDownValues()[0]
    });
};

function getDrillDownValues() {
    var drillDownTuples = webDashboard.GetAvailableDrillDownValues("gridDashboardItem1"),
        drillDownValues = [];

    if (webDashboard.GetAvailableDrillDownValues("gridDashboardItem1") != null) {
        $.each(drillDownTuples, function (index, value) {
            drillDownValues.push(value.GetAxisPoint().GetValue());
        });
        return drillDownValues;
    }
    else {
        return function () { };
    }
};

function performDrillAction() {
    var tuple = webDashboard.GetItemData("gridDashboardItem1").CreateTuple([{
        AxisName: DashboardDataAxisNames.DefaultAxis,
        Value: [$("#selectBox").data("dxSelectBox").option("value")]
    }]);
    if (webDashboard.CanPerformDrillDown("gridDashboardItem1")) {
        webDashboard.PerformDrillDown("gridDashboardItem1", tuple);
    }
    else {
        webDashboard.PerformDrillUp("gridDashboardItem1");
    };
};

function setState() {    
    if (webDashboard.CanPerformDrillDown("gridDashboardItem1")) {
        $("#buttonContainer").dxButton({
            disabled: false,
            text: "Perform Drill-Down"
        });
        $("#selectBox").dxSelectBox({
            disabled: false
        });
    }
    if (webDashboard.CanPerformDrillUp("gridDashboardItem1")) {
        $("#buttonContainer").dxButton({
            disabled: false,
            text: "Perform Drill-Up"
        });
        $("#selectBox").dxSelectBox({
            disabled: true
        });
    }
};