How to: Perform a Drill-Down in ASPxDashboardViewer

Note

Starting with v17.1, we recommend using the ASPxDashboard control or a corresponding ASP.NET MVC extension to display dashboards within web applications. Refer to the following KB articles to learn more about migration to ASPxDashboard / ASP.NET MVC Dashboard:

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

In this example, the ASPxClientDashboardViewer.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 ASPxClientDashboardViewer.GetAvailableDrillDownValues method. Select a required category and click the PerformDrillDown 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 ASPxClientDashboardViewer.PerformDrillUp method is called to do this.

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

    $.each(drillDownTuples, function (index, value) {
        drillDownValues.push(value.GetAxisPoint().GetValue());
    });

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

    $("#buttonContainer").dxButton({
        onClick: performDrillAction,
        text: "PerformDrillDown"
    });

    $("#selectBox").dxSelectBox({
        dataSource: drillDownValues
    });
};

function setState() {
    if (webViewer.CanPerformDrillDown("gridDashboardItem1")) {
        $("#buttonContainer").dxButton({
            disabled: false,
            text: "PerformDrillDown"
        });
        $("#selectBox").dxSelectBox({
            disabled: false
        });
    }
    if (webViewer.CanPerformDrillUp("gridDashboardItem1")) {
        $("#buttonContainer").dxButton({
            disabled: false,
            text: "PerformDrillUp"
        });
        $("#selectBox").dxSelectBox({
            disabled: true
        });
    }
    if (!webViewer.CanPerformDrillDown("gridDashboardItem1") && !webViewer.CanPerformDrillUp("gridDashboardItem1")) {
        $("#buttonContainer").dxButton({
            disabled: true
        });
        $("#selectBox").dxSelectBox({
            disabled: true
        });
    }
};
See Also