dashboard-js-devexpress-dot-dashboard-46a41fd6.md
An extension that allows you to customize a visual part of the Web Dashboard.
export class ViewerApiExtension extends DisposableObject implements ISupportOptionExtension<ViewerApiExtensionOptions>
To configure the Web Dashboard’s visual part, refer to the ViewerApiExtensionOptions class that contains extension options.
ISupportOptionExtension
DisposableObject ViewerApiExtension
Initializes a new instance of the ViewerApiExtension class.
constructor(
dashboardControl: DevExpress.Dashboard.DashboardControl,
options?: ViewerApiExtensionOptions
)
| Name | Type | Description |
|---|---|---|
| dashboardControl | DashboardControl |
A Web Dashboard control that owns the extension.
| | options | ViewerApiExtensionOptions | |
Specifies the unique extension name.
name: string
| Type | Description |
|---|---|
| string |
The unique extension name. The return value is viewerApi.
|
Use the viewerApi name in the following cases:
Warning
Do not change the unique name of the extension registered in the Web Dashboard to avoid exceptions.
Unsubscribes from the ViewerApiExtension’s events.
off: DevExpress.Dashboard.Internal.EventSubscriber<ViewerApiExtensionEvents>
| Type | Description |
|---|---|
| EventSubscriber<ViewerApiExtensionEvents> |
An event subscription.
|
The extension’s on and off methods help you subscribe to and unsubscribe from events:
// An event handler for the ItemWidgetOptionsPrepared event:
function onItemWidgetOptionsPrepared(args) {
alert(args.itemName)
}
...
var viewerApiExtension = dashboardControl.findExtension('viewerApi');
// Subscribe to the ItemWidgetOptionsPrepared event:
if(viewerApiExtension) {
viewerApiExtension.on('itemWidgetOptionsPrepared', onItemWidgetOptionsPrepared)
}
...
// Unsubscribe from the ItemWidgetOptionsPrepared event:
if(viewerApiExtension) {
viewerApiExtension.off('itemWidgetOptionsPrepared', onItemWidgetOptionsPrepared)
}
Subscribes to the ViewerApiExtension’s events.
on: DevExpress.Dashboard.Internal.EventSubscriber<ViewerApiExtensionEvents>
| Type | Description |
|---|---|
| EventSubscriber<ViewerApiExtensionEvents> |
An event subscription.
|
The extension’s on and off methods help you subscribe to and unsubscribe from events:
// An event handler for the ItemWidgetOptionsPrepared event:
function onItemWidgetOptionsPrepared(args) {
alert(args.itemName)
}
...
var viewerApiExtension = dashboardControl.findExtension('viewerApi');
// Subscribe to the ItemWidgetOptionsPrepared event:
if(viewerApiExtension) {
viewerApiExtension.on('itemWidgetOptionsPrepared', onItemWidgetOptionsPrepared)
}
...
// Unsubscribe from the ItemWidgetOptionsPrepared event:
if(viewerApiExtension) {
viewerApiExtension.off('itemWidgetOptionsPrepared', onItemWidgetOptionsPrepared)
}
Requests underlying data for the specified dashboard item.
requestUnderlyingData: (itemName: string, args: DevExpress.Dashboard.Data.RequestUnderlyingDataParameters, onCompleted: (result: DevExpress.Dashboard.Data.ItemUnderlyingData) => void) => void
| Type | Description |
|---|---|
| (itemName: string, args: RequestUnderlyingDataParameters, onCompleted: (result: ItemUnderlyingData) => void) => void |
A lambda function that contains the component name of the dashboard item, the object containing parameters used to obtain the underlying data, and the object that references a method executed after the request is completed.
|
Note
The requestUnderlyingData method returns only non-aggregated data values.
This example gets underlying data that corresponds to a particular visual element and displays this data in the dxPopup widget with the child dxDataGrid.
Handle the DashboardControlOptions.onBeforeRender event to get access to the DashboardControl instance:
<div id="myPopup"></div>
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
@(Html.DevExpress().Dashboard("dashboardControl1")
.Width("100%")
.Height("100%")
.ControllerName("DefaultDashboard")
.WorkingMode(DevExpress.DashboardWeb.WorkingMode.ViewerOnly)
.OnBeforeRender("onBeforeRender")
)
</div>
Handle the ViewerApiExtensionOptions.onItemClick event and call the ViewerApiExtension.requestUnderlyingData method to get the underlying data:
function onBeforeRender(sender) {
var dashboardControl = sender;
var viewerApiExtension = dashboardControl.findExtension('viewerApi');
if (viewerApiExtension)
viewerApiExtension.on('itemClick', onItemClick);
$("#myPopup").dxPopup({
width: 800, height: 600,
title: "Underlying data",
showCloseButton: true
});
}
function onItemClick(args) {
var underlyingData = [];
args.requestUnderlyingData(function (data) {
dataMembers = data.getDataMembers();
for (var i = 0; i < data.getRowCount(); i++) {
var dataTableRow = {};
$.each(dataMembers, function (_, dataMember) {
dataTableRow[dataMember] = data.getRowValue(i, dataMember);
});
underlyingData.push(dataTableRow);
}
var $grid = $('<div/>');
$grid.dxDataGrid({
height: 500,
scrolling: {
mode: 'virtual'
},
dataSource: underlyingData
});
var popup = $("#myPopup").data("dxPopup");
$popupContent = popup.content();
$popupContent.empty();
$popupContent.append($grid);
popup.show();
});
}
Returns whether the specified master filter can be cleared in the current state.
canClearMasterFilter(
itemName: string
): boolean
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the master filter item.
|
| Type | Description |
|---|---|
| boolean |
true if the specified master filter can be cleared in the current state; otherwise, false.
|
The following example shows how to apply master filtering in the Web Dashboard on the client side:
View Example: ASP.NET Web Forms
Returns whether drill down is possible in the current state of the specified dashboard item.
canPerformDrillDown(
itemName: string
): boolean
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the dashboard item.
|
| Type | Description |
|---|---|
| boolean |
true , if drill down is possible in the current state of the specified dashboard item; otherwise, false.
|
Returns whether drill up is possible in the current state of the specified dashboard item.
canPerformDrillUp(
itemName: string
): boolean
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the dashboard item.
|
| Type | Description |
|---|---|
| boolean |
true , if drill up is possible in the current state of the specified dashboard item; otherwise, false.
|
Returns whether master filtering can be applied in the current state of the specified master filter item.
canSetMasterFilter(
itemName: string
): boolean
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the master filter item.
|
| Type | Description |
|---|---|
| boolean |
true if master filtering can be applied in the current state of the specified master filter item; otherwise, false.
|
The following example shows how to apply master filtering in the Web Dashboard on the client side:
View Example: ASP.NET Web Forms
Clears the specified master filter item.
clearMasterFilter(
itemName: string
): void
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the master filter item.
|
Use the ViewerApiExtension.setMasterFilter method to set master filter values.
The following code shows how to clear filter values for the Grid dashboard item:
dashboardControl.GetDashboardControl().findExtension('viewerApi').clearMasterFilter();
See Also
Master Filtering in the Web Dashboard
setMasterFilter(itemName, values)
canClearMasterFilter(itemName)
getAvailableActions(
itemName: string
): Array<string>
| Name | Type |
|---|---|
| itemName | string |
| Type |
|---|
| string[] |
Returns axis point tuples identifying elements that can be used to drill down in the specified dashboard item.
getAvailableDrillDownValues(
itemName: string
): Array<DevExpress.Dashboard.Data.ItemDataAxisPointTuple>
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that is the component name of the dashboard item.
|
| Type | Description |
|---|---|
| ItemDataAxisPointTuple[] |
An array of ItemDataAxisPointTuple objects identifying elements that can be used to drill down in the specified dashboard item.
|
The following example shows how to drill down in the Web Dashboard control on the client side.
The example contains a dxSelectBox UI component, a Grid dashboard item, and a button.
The ViewerApiExtension.getAvailableDrillDownValues method call obtains the categories available for drill-down in the Grid item. The dxSelectBox uses these categories as a data source. When you select the category in the select box and click the Drill Down button, the ViewerApiExtension.performDrillDown method call drills down in the specified row in the Grid item.
When the Grid displays a list of products (the bottom-most detail level), you can only drill up, and the Drill Down button changes to Drill Up. When you click the Drill Up button, the ViewerApiExtension.performDrillUp method is called. This action returns you to the top detail level (a list of categories). The ViewerApiExtension.canPerformDrillDown and ViewerApiExtension.canPerformDrillUp method calls check whether the Drill-Down or Drill-Up are available.
View Example: ASP.NET Web Forms View Example: ASP.NET MVC
var dashboardControl;
var viewerApiExtension;
function onBeforeRender(s) {
dashboardControl = s.GetDashboardControl();
if (dashboardControl) {
viewerApiExtension = dashboardControl.findExtension('viewerApi');
dashboardControl.on('dashboardEndUpdate', initializeControls);
}
if (viewerApiExtension)
viewerApiExtension.on('itemActionAvailabilityChanged', onActionAvailabilityChanged);
}
function initializeControls() {
$("#buttonContainer").dxButton({
onClick: performDrillAction,
});
$("#selectBox").dxSelectBox({
dataSource: getDrillDownValues(),
value: getDrillDownValues()[0]
});
};
function getDrillDownValues() {
var drillDownValues = [];
if (viewerApiExtension) {
var drillDownTuples = viewerApiExtension.getAvailableDrillDownValues("gridDashboardItem1");
if (drillDownTuples != null) {
$.each(drillDownTuples, function (index, value) {
drillDownValues.push(value.getAxisPoint().getValue());
});
}
}
return drillDownValues;
};
function performDrillAction() {
var tuple = viewerApiExtension.getItemData("gridDashboardItem1").createTuple([{
axisName: "Default",
value: [$("#selectBox").data("dxSelectBox").option("value")]
}]);
if (viewerApiExtension.canPerformDrillDown("gridDashboardItem1"))
viewerApiExtension.performDrillDown("gridDashboardItem1", tuple)
else {
if (viewerApiExtension.canPerformDrillUp("gridDashboardItem1"))
viewerApiExtension.performDrillUp("gridDashboardItem1");
};
};
function onActionAvailabilityChanged() {
if (viewerApiExtension.canPerformDrillDown("gridDashboardItem1")) {
$("#buttonContainer").dxButton({
text: "Drill Down"
});
$("#selectBox").dxSelectBox({
disabled: false
});
}
if (viewerApiExtension.canPerformDrillUp("gridDashboardItem1")) {
$("#buttonContainer").dxButton({
text: "Drill Up"
});
$("#selectBox").dxSelectBox({
disabled: true
});
}
};
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPxDashboard_PerformDrillDown.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="Scripts/DrillDown.js"></script>
</head>
<body>
<form id="form1" runat="server">
<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;">
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" WorkingMode="Viewer"
ClientInstanceName="webDashboard" Width="100%" Height="100%"
ClientSideEvents-BeforeRender="onBeforeRender">
</dx:ASPxDashboard>
</div>
</form>
</body>
</html>
Returns elements that can be selected in the master filter item’s current state (except Range Filter or Date Filter items).
getAvailableFilterValues(
itemName: string
): Array<DevExpress.Dashboard.Data.ItemDataAxisPointTuple>
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that is the component name of the master filter item.
|
| Type | Description |
|---|---|
| ItemDataAxisPointTuple[] |
An array of ItemDataAxisPointTuple objects identifying elements that can be selected in the current state of the master filter item.
|
For Range Filter or Date Filter dashboard items, call the getCurrentRange(itemName) method to get the selected range.
Returns names of the predefined ranges available for the specified Range Filter / Date Filter.
getAvailablePredefinedRanges(
itemName: string
): Array<string>
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies a component name of the Range Filter / Date Filter dashboard items.
|
| Type | Description |
|---|---|
| string[] |
An array of string values that are names of the available predefined ranges.
|
Returns the axis point tuple identifying the current drill-down state.
getCurrentDrillDownValues(
itemName: string
): DevExpress.Dashboard.Data.ItemDataAxisPointTuple
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that is the component name of the dashboard item.
|
| Type | Description |
|---|---|
| ItemDataAxisPointTuple |
An ItemDataAxisPointTuple object representing a set of axis points.
|
Returns axis point tuples identifying currently selected elements in the master filter item.
getCurrentFilterValues(
itemName: string
): Array<DevExpress.Dashboard.Data.ItemDataAxisPointTuple>
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that is the component name of the master filter item.
|
| Type | Description |
|---|---|
| ItemDataAxisPointTuple[] |
An array of ItemDataAxisPointTuple objects identifying elements that can be selected in the current state of the master filter item.
|
getCurrentPredefinedRange(
itemName: string
): string
| Name | Type |
|---|---|
| itemName | string |
| Type |
|---|
| string |
Returns the currently selected range in the specified Range Filter dashboard item.
getCurrentRange(
itemName: string
): DevExpress.Dashboard.Data.RangeFilterSelection
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the Range Filter dashboard item.
|
| Type | Description |
|---|---|
| RangeFilterSelection |
A RangeFilterSelection object that is the selected range.
|
Use the getCurrentRange method after the dashboard item loads data. When the Range Filter or Date Filter has no data to display, the getCurrentRange method returns null.
Returns currently selected elements in the master filter item.
getCurrentSelection(
itemName: string
): Array<DevExpress.Dashboard.Data.ItemDataAxisPointTuple>
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies a component name of the master filter item.
|
| Type |
|---|
| ItemDataAxisPointTuple[] |
Returns the visible range for the specified Range Filter dashboard item.
getEntireRange(
itemName: string
): DevExpress.Dashboard.Data.RangeFilterSelection
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the Range Filter dashboard item.
|
| Type | Description |
|---|---|
| RangeFilterSelection |
A RangeFilterSelection object that is the visible range.
|
Returns the client data for the specified dashboard item.
getItemData(
itemName: string
): DevExpress.Dashboard.Data.ItemData
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the dashboard item.
|
| Type | Description |
|---|---|
| ItemData |
An ItemData object that represents multidimensional data visualized in the dashboard item.
|
See the following examples that show how to use the getItemData method:
View Example: ASP.NET CoreView Example: ASP.NET Web Forms
Gets the selected page in the specified tab container.
getSelectedTabPage(
tabContainerName: string
): string
| Name | Type | Description |
|---|---|---|
| tabContainerName | string |
A string that is the tab container’s componentName property value.
|
| Type | Description |
|---|---|
| string |
A string that is the tab page’s componentName property value.
|
Gets the index of the selected page in the specified tab container.
getSelectedTabPageIndex(
tabContainerName: string
): number
| Name | Type | Description |
|---|---|---|
| tabContainerName | string |
A string that is the tab container’s componentName property value.
|
| Type | Description |
|---|---|
| number |
A number that is the tab page’s index.
|
Performs a drill-down into the required element.
performDrillDown(
itemName: string,
value: DevExpress.Dashboard.Data.PrimitiveType | DevExpress.Dashboard.Data.ItemDataAxisPointTuple
): void
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the dashboard item.
| | value | PrimitiveType | ItemDataAxisPointTuple |
An ItemDataAxisPointTuple object representing a set of axis points.
|
The following example shows how to drill down in the Web Dashboard control on the client side.
The example contains a dxSelectBox UI component, a Grid dashboard item, and a button.
The ViewerApiExtension.getAvailableDrillDownValues method call obtains the categories available for drill-down in the Grid item. The dxSelectBox uses these categories as a data source. When you select the category in the select box and click the Drill Down button, the ViewerApiExtension.performDrillDown method call drills down in the specified row in the Grid item.
When the Grid displays a list of products (the bottom-most detail level), you can only drill up, and the Drill Down button changes to Drill Up. When you click the Drill Up button, the ViewerApiExtension.performDrillUp method is called. This action returns you to the top detail level (a list of categories). The ViewerApiExtension.canPerformDrillDown and ViewerApiExtension.canPerformDrillUp method calls check whether the Drill-Down or Drill-Up are available.
View Example: ASP.NET Web Forms View Example: ASP.NET MVC
var dashboardControl;
var viewerApiExtension;
function onBeforeRender(s) {
dashboardControl = s.GetDashboardControl();
if (dashboardControl) {
viewerApiExtension = dashboardControl.findExtension('viewerApi');
dashboardControl.on('dashboardEndUpdate', initializeControls);
}
if (viewerApiExtension)
viewerApiExtension.on('itemActionAvailabilityChanged', onActionAvailabilityChanged);
}
function initializeControls() {
$("#buttonContainer").dxButton({
onClick: performDrillAction,
});
$("#selectBox").dxSelectBox({
dataSource: getDrillDownValues(),
value: getDrillDownValues()[0]
});
};
function getDrillDownValues() {
var drillDownValues = [];
if (viewerApiExtension) {
var drillDownTuples = viewerApiExtension.getAvailableDrillDownValues("gridDashboardItem1");
if (drillDownTuples != null) {
$.each(drillDownTuples, function (index, value) {
drillDownValues.push(value.getAxisPoint().getValue());
});
}
}
return drillDownValues;
};
function performDrillAction() {
var tuple = viewerApiExtension.getItemData("gridDashboardItem1").createTuple([{
axisName: "Default",
value: [$("#selectBox").data("dxSelectBox").option("value")]
}]);
if (viewerApiExtension.canPerformDrillDown("gridDashboardItem1"))
viewerApiExtension.performDrillDown("gridDashboardItem1", tuple)
else {
if (viewerApiExtension.canPerformDrillUp("gridDashboardItem1"))
viewerApiExtension.performDrillUp("gridDashboardItem1");
};
};
function onActionAvailabilityChanged() {
if (viewerApiExtension.canPerformDrillDown("gridDashboardItem1")) {
$("#buttonContainer").dxButton({
text: "Drill Down"
});
$("#selectBox").dxSelectBox({
disabled: false
});
}
if (viewerApiExtension.canPerformDrillUp("gridDashboardItem1")) {
$("#buttonContainer").dxButton({
text: "Drill Up"
});
$("#selectBox").dxSelectBox({
disabled: true
});
}
};
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPxDashboard_PerformDrillDown.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="Scripts/DrillDown.js"></script>
</head>
<body>
<form id="form1" runat="server">
<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;">
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" WorkingMode="Viewer"
ClientInstanceName="webDashboard" Width="100%" Height="100%"
ClientSideEvents-BeforeRender="onBeforeRender">
</dx:ASPxDashboard>
</div>
</form>
</body>
</html>
Performs a drill-up for the required element.
performDrillUp(
itemName: string
): void
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the dashboard item.
|
The following example shows how to drill down in the Web Dashboard control on the client side.
The example contains a dxSelectBox UI component, a Grid dashboard item, and a button.
The ViewerApiExtension.getAvailableDrillDownValues method call obtains the categories available for drill-down in the Grid item. The dxSelectBox uses these categories as a data source. When you select the category in the select box and click the Drill Down button, the ViewerApiExtension.performDrillDown method call drills down in the specified row in the Grid item.
When the Grid displays a list of products (the bottom-most detail level), you can only drill up, and the Drill Down button changes to Drill Up. When you click the Drill Up button, the ViewerApiExtension.performDrillUp method is called. This action returns you to the top detail level (a list of categories). The ViewerApiExtension.canPerformDrillDown and ViewerApiExtension.canPerformDrillUp method calls check whether the Drill-Down or Drill-Up are available.
View Example: ASP.NET Web Forms View Example: ASP.NET MVC
var dashboardControl;
var viewerApiExtension;
function onBeforeRender(s) {
dashboardControl = s.GetDashboardControl();
if (dashboardControl) {
viewerApiExtension = dashboardControl.findExtension('viewerApi');
dashboardControl.on('dashboardEndUpdate', initializeControls);
}
if (viewerApiExtension)
viewerApiExtension.on('itemActionAvailabilityChanged', onActionAvailabilityChanged);
}
function initializeControls() {
$("#buttonContainer").dxButton({
onClick: performDrillAction,
});
$("#selectBox").dxSelectBox({
dataSource: getDrillDownValues(),
value: getDrillDownValues()[0]
});
};
function getDrillDownValues() {
var drillDownValues = [];
if (viewerApiExtension) {
var drillDownTuples = viewerApiExtension.getAvailableDrillDownValues("gridDashboardItem1");
if (drillDownTuples != null) {
$.each(drillDownTuples, function (index, value) {
drillDownValues.push(value.getAxisPoint().getValue());
});
}
}
return drillDownValues;
};
function performDrillAction() {
var tuple = viewerApiExtension.getItemData("gridDashboardItem1").createTuple([{
axisName: "Default",
value: [$("#selectBox").data("dxSelectBox").option("value")]
}]);
if (viewerApiExtension.canPerformDrillDown("gridDashboardItem1"))
viewerApiExtension.performDrillDown("gridDashboardItem1", tuple)
else {
if (viewerApiExtension.canPerformDrillUp("gridDashboardItem1"))
viewerApiExtension.performDrillUp("gridDashboardItem1");
};
};
function onActionAvailabilityChanged() {
if (viewerApiExtension.canPerformDrillDown("gridDashboardItem1")) {
$("#buttonContainer").dxButton({
text: "Drill Down"
});
$("#selectBox").dxSelectBox({
disabled: false
});
}
if (viewerApiExtension.canPerformDrillUp("gridDashboardItem1")) {
$("#buttonContainer").dxButton({
text: "Drill Up"
});
$("#selectBox").dxSelectBox({
disabled: true
});
}
};
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPxDashboard_PerformDrillDown.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="Scripts/DrillDown.js"></script>
</head>
<body>
<form id="form1" runat="server">
<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;">
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" WorkingMode="Viewer"
ClientInstanceName="webDashboard" Width="100%" Height="100%"
ClientSideEvents-BeforeRender="onBeforeRender">
</dx:ASPxDashboard>
</div>
</form>
</body>
</html>
Selects required elements by their values in the specified master filter item.
setMasterFilter(
itemName: string,
values: DevExpress.Dashboard.Model.MasterFilterValues
): void
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the master filter item.
| | values | MasterFilterValues |
Values that are used to select elements in the master filter item.
|
Only dimension fields can be a part of the master filter values. To select a row, create a filter with unique values that unambiguously define this row.
The following code shows how to add filter values to the Grid dashboard item with Country and Sales Person dimensions:
var filterValues = [['UK', 'Anne Dodsworth'], ['USA', 'Andrew Fuller']];
dashboardControl.GetDashboardControl().findExtension('viewerApi').setMasterFilter("gridSalesByState", filterValues);
Use the ViewerApiExtension.clearMasterFilter(itemName) method to clear filter values.
The following example shows how to apply master filtering in the Web Dashboard on the client side:
View Example: ASP.NET Web Forms
See Also
Master Filtering in the Web Dashboard
canClearMasterFilter(itemName)
Selects a predefined range in the Range Filter dashboard item.
setPredefinedRange(
itemName: string,
dateTimePeriodName: string
): void
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the Range Filter.
| | dateTimePeriodName | string |
A string that specifies the predefined range name.
|
Use the setPredefinedRange method after the Range Filter has loaded data. When the Range Filter has no data to display, the setPredefinedRange method returns null.
Selects the required range in the specified Range Filter / Date Filter dashboard item.
setRange(
itemName: string,
range: DevExpress.Dashboard.Data.RangeFilterSelection
): void
| Name | Type | Description |
|---|---|---|
| itemName | string |
A string that specifies the component name of the Range Filter / Date Filter.
| | range | RangeFilterSelection |
A RangeFilterSelection object that specifies a range to be selected.
|
Use the setRange method after the Range Filter / Date Filter has loaded data. When the Range Filter / Date Filter has no data to display, the setRange method returns null.
Selects the specified tab page by its component name.
setSelectedTabPage(
tabPageName: string
): void
| Name | Type | Description |
|---|---|---|
| tabPageName | string |
A string that is the tab page’s componentName property value.
|
Selects the specified tab page by its index in the specified tab container.
setSelectedTabPageIndex(
tabContainerName: string,
index: number
): void
| Name | Type | Description |
|---|---|---|
| tabContainerName | string |
A string that is the tab container’s componentName property value.
| | index | number |
A number that is the tab page’s index.
|
Contains code that is executed when you register the dashboard extension.
start(): void
Contains code that is executed when you unregister the dashboard extension.
stop(): void
Fires the DashboardTitleToolbarUpdated event.
updateDashboardTitleToolbar(): void
The DashboardTitleToolbarUpdated event occurs before the dashboard title toolbar is updated. Use the updateDashboardTitleToolbar method to trigger the following event manually.
Fires the ItemCaptionToolbarUpdated event for the specified item.
updateItemCaptionToolbar(
itemName?: string
): void
| Name | Type | Description |
|---|---|---|
| itemName | string |
A dashboard item name for which the event is fired.
|
The ItemCaptionToolbarUpdated event occurs before the dashboard item’s caption toolbar is updated. Use the updateItemCaptionToolbar method to trigger the following event manually. If the itemName parameter is empty, the ItemCaptionToolbarUpdated event is fired for all dashboard items and groups.