How to: Perform a Drill-Down in the ASP.NET MVC Dashboard Extension

The following example demonstrates how to perform a drill-down in the ASP.NET MVC Dashboard Extension 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.

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