Important
This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.
Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:
The following example demonstrates how to perform a drill-down in MVCxDashboardViewer 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.
@model DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(settings => {
settings.Name = "webViewer";
settings.CallbackRouteValues = new { Controller = "Home", Action = "DashboardViewerPartial" };
settings.ExportRouteValues = new { Controller = "Home", Action = "DashboardViewerPartialExport" };
settings.ClientSideEvents.Loaded = "function() { createControls(); }";
settings.ClientSideEvents.ActionAvailabilityChanged = "function() { setState(); }";
}).BindToSource(Model).GetHtml()
@{
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: 20px;"></div>
<div>
@using (Html.BeginForm())
{
@Html.Action("DashboardViewerPartial")
}
</div>
</body>
</html>
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
});
}
};
<!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.DashboardViewer }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
</head>
<body>
@RenderBody()
</body>
</html>
using DevExpress.DashboardWeb.Mvc;
using DevExpress.DataAccess.ConnectionParameters;
using System.Web.Mvc;
namespace MVCxDashboardViewer_PerformDrillDown.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[ValidateInput(false)]
public ActionResult DashboardViewerPartial()
{
return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model);
}
public FileStreamResult DashboardViewerPartialExport()
{
return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model);
}
}
class DashboardViewerSettings
{
public static DashboardSourceModel Model
{
get
{
DashboardSourceModel model = new DashboardSourceModel();
model.DashboardSource = System.Web.Hosting.HostingEnvironment.MapPath(@"~\App_Data\Dashboard.xml");
model.ConfigureDataConnection = (sender, e) => {
if (e.ConnectionName == "nwindConnection")
{
Access97ConnectionParameters parameters = (Access97ConnectionParameters)e.ConnectionParameters;
string databasePath = System.Web.Hosting.HostingEnvironment.MapPath(@"~\App_Data\nwind.mdb");
parameters.FileName = databasePath;
}
};
return model;
}
}
}
}
<!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.DashboardViewer }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
</head>
<body>
@RenderBody()
</body>
</html>
@{
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: 20px;"></div>
<div>
@using (Html.BeginForm())
{
@Html.Action("DashboardViewerPartial")
}
</div>
</body>
</html>
Imports DevExpress.DashboardWeb.Mvc
Imports DevExpress.DataAccess.ConnectionParameters
Imports System.Web.Mvc
Namespace MVCxDashboardViewer_PerformDrillDown.Controllers
Public Class HomeController
Inherits Controller
Public Function Index() As ActionResult
Return View()
End Function
<ValidateInput(False)> _
Public Function DashboardViewerPartial() As ActionResult
Return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model)
End Function
Public Function DashboardViewerPartialExport() As FileStreamResult
Return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model)
End Function
End Class
Friend Class DashboardViewerSettings
Public Shared ReadOnly Property Model() As DashboardSourceModel
Get
Dim model_Renamed As New DashboardSourceModel()
model_Renamed.DashboardSource = System.Web.Hosting.HostingEnvironment.MapPath("~\App_Data\Dashboard.xml")
model_Renamed.ConfigureDataConnection = Sub(sender, e)
If e.ConnectionName = "nwindConnection" Then
Dim parameters As Access97ConnectionParameters = CType(e.ConnectionParameters, Access97ConnectionParameters)
Dim databasePath As String = System.Web.Hosting.HostingEnvironment.MapPath("~\App_Data\nwind.mdb")
parameters.FileName = databasePath
End If
End Sub
Return model_Renamed
End Get
End Property
End Class
End Namespace
@model DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(settings => {
settings.Name = "webViewer";
settings.CallbackRouteValues = new { Controller = "Home", Action = "DashboardViewerPartial" };
settings.ExportRouteValues = new { Controller = "Home", Action = "DashboardViewerPartialExport" };
settings.ClientSideEvents.Loaded = "function() { createControls(); }";
settings.ClientSideEvents.ActionAvailabilityChanged = "function() { setState(); }";
}).BindToSource(Model).GetHtml()
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