This example demonstrates how to invoke a Detail View when a user clicks a row in GridDashboardItem. In the invoked Detail View, a user can view or edit a business object corresponding to the clicked row.
Implementation Details
See the following help topic for more information: Open a Detail View When the Grid Row is Clicked in the Dashboard (Blazor)
Files to Look At
Documentation
- Dashboards Module
- Open a Detail View When the Grid Row is Clicked in the Dashboard (Blazor)
- Open a Detail View When the Grid Row is Clicked in the Dashboard (WinForms and ASP.NET Web Forms)
More Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
EF/OpenViewFromDashboardEF/OpenViewFromDashboardEF.Blazor.Server/wwwroot/js/customScript.js
JavaScript"use strict";
globalThis.customScript = {
showDetailViewControllers: {},
onBeforeRender: function (dashboardControl) {
const viewerApi = dashboardControl.findExtension("viewerApi");
viewerApi.on("itemClick", globalThis.customScript.processItemClick.bind(dashboardControl));
},
registerController: function (key, controller) {
globalThis.customScript.showDetailViewControllers[key] = controller;
},
unregisterController: function (key) {
delete globalThis.customScript.showDetailViewControllers[key];
},
processItemClick: function (args) {
const itemData = args.getData(),
dataSlice = itemData.getSlice(args.getAxisPoint()),
oidMeasure = dataSlice.getMeasures().find((measure) => measure.dataMember === 'ID').id,
measureValue = dataSlice.getMeasureValue(oidMeasure),
objectId = measureValue.getValue(),
controllerId = this.element().dataset["showdetailid"];
globalThis.customScript.showDetailViewControllers[controllerId].invokeMethodAsync("ShowDetailView", objectId);
}
}
if (!globalThis.xafBlazorDashboardUserScripts) {
globalThis.xafBlazorDashboardUserScripts = [];
}
globalThis.xafBlazorDashboardUserScripts.push(globalThis.customScript);
EF/OpenViewFromDashboardEF/OpenViewFromDashboardEF.Blazor.Server/Controllers/BlazorShowDetailViewFromDashboardController.cs
C#using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Dashboards.Blazor.Components;
using DevExpress.Persistent.Base;
using OpenViewFromDashboardEF.Module.BusinessObjects;
using Microsoft.JSInterop;
namespace OpenViewFromDashboard.Blazor.Server.Controllers;
public class BlazorShowDetailViewFromDashboardController : ObjectViewController<DetailView, IDashboardData> {
private string clientId = Guid.NewGuid().ToString();
private DotNetObjectReference<BlazorShowDetailViewFromDashboardController> controllerReference;
public BlazorShowDetailViewFromDashboardController() {
controllerReference = DotNetObjectReference.Create(this);
}
protected override void OnActivated() {
base.OnActivated();
Application.ServiceProvider.GetRequiredService<IJSRuntime>().InvokeVoidAsync("customScript.registerController", clientId, controllerReference).Preserve();
View.CustomizeViewItemControl<BlazorDashboardViewerViewItem>(this, CustomizeDashboardViewerViewItem);
}
private void CustomizeDashboardViewerViewItem(BlazorDashboardViewerViewItem dashboardViewerViewItem) {
dashboardViewerViewItem.ComponentModel.SetAttribute("data-showdetailid", clientId);
}
protected override void OnDeactivated() {
Application.ServiceProvider.GetRequiredService<IJSRuntime>().InvokeVoidAsync("customScript.unregisterController", clientId).Preserve();
base.OnDeactivated();
}
protected override void Dispose(bool disposing) {
base.Dispose(disposing);
controllerReference.Dispose();
}
[JSInvokable]
public void ShowDetailView(string oidString) {
if(!Guid.TryParse(oidString, out var id)) {
return;
}
var objectSpace = Application.CreateObjectSpace(typeof(Contact));
var item = objectSpace.FirstOrDefault<Contact>(c => c.ID == id);
if(item is not null) {
var detailView = Application.CreateDetailView(objectSpace, item, true);
Application.ShowViewStrategy.ShowViewFromCommonView(detailView);
} else {
objectSpace.Dispose();
}
}
}