Drill-Down on the Web

  • 4 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:

web-dashboard-drill-down-overview

The following dashboard items support the Drill-Down feature:

Enable Drill-Down

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

wdd-drill-down-hierarchy

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

wdd-drill-down-hierarchy-olap

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

wdd-drill-down

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:

WebDashboardDrillDownScheme

NOTE

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

Example

The following example demonstrates how drill down in ASPxDashboard on the client side.

In this example, the ASPxClientDashboard.PerformDrillDown method is used to drill down in 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 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.

View Example

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
        });
    }
};
See Also