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

• Aug 01, 2019
• 4 minutes to read

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.

Note

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

DrillDown.js (VB.NET)

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

Global.asax.vb

Imports DevExpress.DashboardWeb
Imports DevExpress.DashboardWeb.Mvc
Imports System
Imports System.Web.Mvc
Imports System.Web.Routing

Namespace MVCxDashboard_PerformDrillDown
    Public Class MvcApplication
        Inherits System.Web.HttpApplication

        Public Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}")
            routes.MapDashboardRoute()

            routes.MapRoute("Default", "{controller}/{action}/{id}", New With {Key .controller = "Home", Key .action = "Index", Key .id = UrlParameter.Optional})
        End Sub

        Protected Sub Application_Start()
            AreaRegistration.RegisterAllAreas()
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
            RegisterRoutes(RouteTable.Routes)
            ModelBinders.Binders.DefaultBinder = New DevExpress.Web.Mvc.DevExpressEditorsBinder()
            AddHandler DevExpress.Web.ASPxWebControl.CallbackError, AddressOf Application_Error

            DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/"))
        End Sub

        Protected Sub Application_Error(ByVal sender As Object, ByVal e As EventArgs)
            Dim exception As Exception = System.Web.HttpContext.Current.Server.GetLastError()
        End Sub
    End Class
End Namespace

HomeController.vb

Imports System.Web.Mvc

Namespace MVCxDashboard_PerformDrillDown.Controllers
    Public Class HomeController
        Inherits Controller

        Public Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

_Layout.cshtml (VB.NET)

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/DrillDown.js")" type="text/javascript"></script>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )

</head>

<body>
    @RenderBody()
</body>
</html>

Index.cshtml (VB.NET)

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <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;">
        @Html.DevExpress().Dashboard(settings =>
           {
               settings.Name = "webDashboard";
               settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
               settings.Width = Unit.Percentage(100);
               settings.Height = Unit.Percentage(100);
               settings.ClientSideEvents.DashboardEndUpdate = "function() { initializeControls(); }";
               settings.ClientSideEvents.ActionAvailabilityChanged = "function() { setState(); }";
           }).GetHtml()
    </div>
</body>
</html>

DrillDown.js (C#)

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

_Layout.cshtml (C#)

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/DrillDown.js")" type="text/javascript"></script>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )

</head>

<body>
    @RenderBody()
</body>
</html>

HomeController.cs

using System.Web.Mvc;

namespace MVCxDashboard_PerformDrillDown.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Global.asax.cs

using DevExpress.DashboardWeb;
using DevExpress.DashboardWeb.Mvc;
using System;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCxDashboard_PerformDrillDown
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");
            routes.MapDashboardRoute();

            routes.MapRoute(
                "Default",
                "{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
            ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();
            DevExpress.Web.ASPxWebControl.CallbackError += Application_Error;

            DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage(@"~/App_Data/"));
        }

        protected void Application_Error(object sender, EventArgs e)
        {
            Exception exception = System.Web.HttpContext.Current.Server.GetLastError();
        }
    }
}

Index.cshtml (C#)

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <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;">
        @Html.DevExpress().Dashboard(settings =>
           {
               settings.Name = "webDashboard";
               settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
               settings.Width = Unit.Percentage(100);
               settings.Height = Unit.Percentage(100);
               settings.ClientSideEvents.DashboardEndUpdate = "function() { initializeControls(); }";
               settings.ClientSideEvents.ActionAvailabilityChanged = "function() { setState(); }";
           }).GetHtml()
    </div>
</body>
</html>