Manage Data Inspector in the ASP.NET Core Dashboard Control

Aug 01, 2023
4 minutes to read

Data Inspector is a dialog window that displays raw or aggregated data. The window can contain one or two grids depending on chosen options. A user can employ the radio group located at the window top to switch between grids.

Data Inspector is a Web Dashboard extension. You can access the DataInspectorExtension class and its options to configure it.

Aggregated and Raw Data

Aggregated Data_Aggregated Data_ is retrieved from the dashboard item’s data storage that is the MultiDimensionalData object. For more information on how Aggregated Data is displayed in Data Inspector, refer to the following article: Aggregated Data.Raw Data_Raw data_ is the dashboard item’s underlying data. For more information on how Aggregated Data is displayed in Data Inspector, refer to the following article: Raw Data.

For more information on underlying and displayed data in the Web Dashboard Control, refer to the following article: Underlying and Displayed Data.

Enable Data Inspector

The Inspect Data button is initially hidden. To show it, pass true as a parameter to the following methods depending on the data you want to display:

cshtml

<div style="position: absolute; left:0;top:0;right:0;bottom:0;">
    @(Html.DevExpress().Dashboard("clientDashboardControl1")
        //...
        .Extensions(ext => {
            ext.DataInspector(options => {
                options.AllowInspectAggregatedData(true);
                options.AllowInspectRawData(true);
            });
        })
    )
</div>

To invoke the Data Inspector window in the UI, click the Inspect Data button in the dashboard item caption:

When you pass true as a parameter of only one method, the window contains a single grid with raw or aggregated data. The window caption displays the dashboard item caption text and the inspected item type (raw or aggregated) in parentheses.

When you pass true as a parameter of both methods, the window contains two grids with raw and aggregated data and allows a user to switch between them. The window caption displays the dashboard item caption text.

The Data Inspector can display hidden measures but does not display hidden dimensions. You can add data members to the Hidden Measures section to display them only in the Data inspector while keeping visual data unchanged.

Customize Data Inspector

To customize the Data Inspector dialog, use the DataInspectorExtensionOptions API:

onGridContentReadyA handler for the event that occurs after the Grid widget’s content is loaded.onGridInitializedA handler for the event that occurs before the Grid widget’s content is loaded.onDialogHiddenA handler for the event that occurs when the Data Inspector dialog is hidden.onDialogShowingA handler for the event that occurs before the Data Inspector dialog is shown.onDialogShownA handler for the event that occurs after the Data Inspector dialog is shown.

You can also use the DataInspectorExtensionEvents members to handle events.

Call the DataInspectorExtension.showDataInspector method to invoke the Data Inspector dialog.

Export Data

Data Inspector allows you to export data to Excel. To do this, enable export options of the underlying DevExtreme DataGrid instance used to display raw or aggregated data.

The export functionality requires the ExcelJS v4+ and FileSaver v2.0.2+ npm packages. For more details, see Client-Side Exporting topic.

Follow the steps below to enable export:

Handle the DataInspectorExtensionOptions.onGridInitialized event.
Use the e.component property to obtain the dxDataGrid instance.
Set the dxDataGrid‘s export.enabled option to true.

Control
Script

cshtml

<div style="position: absolute; left:0;top:0;right:0;bottom:0;">
    @(Html.DevExpress().Dashboard("clientDashboardControl1")
        //...
        .Extensions(ext => {
            ext.DataInspector(options => {
                options.AllowInspectAggregatedData(true);
                options.AllowInspectRawData(true);
            });
        })
        .OnBeforeRender("onBeforeRender")
    )
</div>

function onBeforeRender(dashboardControl) {
    dashboardControl.option({
        extensions: {
            dataInspector: {
                onGridInitialized
            }
        }
    });
}

function onGridInitialized(e) {
    e.component.option({
        export: {
            enabled: true
        },
        onExporting() {
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('Main sheet');

            DevExpress.excelExporter.exportDataGrid({
                component: e.component,
                worksheet: worksheet
            }).then(function () {
                workbook.xlsx.writeBuffer().then(function (buffer) {
                    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
                });
            });
        }
    });
}

Data Inspector displays the Export to Excel button when you enable export:

For more information about this functionality, its prerequisites and restrictions, refer to the following topic: Client-Side Exporting.