How to: Perform a Drill-Down in the ASP.NET Web Forms Dashboard Control

Aug 01, 2019
2 minutes to read

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

WebForm1.aspx (C#)
DrillDown.js

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

<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.17.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <div id="selectBox" style="float: left;"></div>
    <div id="buttonContainer" style="float: left; margin-left: 150px;"></div>
    <div style="position: absolute; left: 0; right: 0; top:50px; bottom:0;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer" ClientInstanceName="webDashboard" 

            ClientSideEvents-DashboardEndUpdate="function() { initializeControls(); }"
            ClientSideEvents-ActionAvailabilityChanged="function() { setState(); }"
            Width="100%" Height="100%">
        </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/DrillDown.js") %>"></script>

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

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode