The following example demonstrates how to perform a drill-down in ASPxDashboard 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.
Dim access97Params As New Access97ConnectionParameters()
access97Params.FileName = "..\..\Data\nwind.mdb"
Dim sqlDataSource As New DashboardSqlDataSource("SQL Data Source 1", access97Params)
Dim selectQuery As SelectQuery = SelectQueryFluentBuilder.AddTable("SalesPerson"). _
SelectColumns("CategoryName", "Sales Person", "OrderDate", "Extended Price").Build("Query 1")
sqlDataSource.Queries.Add(selectQuery)
sqlDataSource.Fill()
dashboardDesigner1.Dashboard.DataSources.Add(sqlDataSource)
Access97ConnectionParameters access97Params = new Access97ConnectionParameters();
access97Params.FileName = @"..\..\Data\nwind.mdb";
DashboardSqlDataSource sqlDataSource =
new DashboardSqlDataSource("SQL Data Source 1", access97Params);
SelectQuery selectQuery = SelectQueryFluentBuilder
.AddTable("SalesPerson")
.SelectColumns("CategoryName", "Sales Person", "OrderDate", "Extended Price")
.Build("Query 1");
sqlDataSource.Queries.Add(selectQuery);
sqlDataSource.Fill();
dashboardDesigner1.Dashboard.DataSources.Add(sqlDataSource);
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
});
}
};