Dashboard for MVC - How to Drill Down on the Client

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 is changed 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.

Files to Review

• DrillDown.js (VB: DrillDown.js)
• Index.cshtml (VB: Index.vbhtml)
• _rootLayout.cshtml (VB: _rootLayout.vbhtml)

Documentation

• Drill-Down

More Examples

• Dashboard for Web Forms - How to drill down on the client
• Dashboard for Web Forms - How to update the parameter value when the item's master filter state is changed
• Dashboard for Web Forms - How to apply Master Filtering in OLAP mode
• Dashboard for Web Forms - How to Apply Master Filter on the Client
• Dashboard for MVC - How to Apply Master Filter on the Client

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)