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
});
}
};
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
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
<!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>
@{
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>
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
});
}
};
<!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>
using System.Web.Mvc;
namespace MVCxDashboard_PerformDrillDown.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
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();
}
}
}
@{
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>