This example shows how to create an extension for the Dashboard Designer / Dashboard Viewer controls that displays detailed data for a clicked pivot element (a data cell or a field value). This extension add the Display Details button to the ribbon, that behaves like default interactivity options. So that end users who design dashboards can enable or disable this functionality in the same manner as Drill-Down, Master Filtering, or other options.
![]()
The example contains a solution with two projects:
1.
PivotDetailExtension– contains the code related to the extension. This project produces a custom class library (
PivotDetailExtension.dll) that can be referenced and reused in other Designer / Viewer applications.
2.
DesignerSample– is a simple dashboard designer application that demonstrates how to use the extension.
This approach has the following limitations:
1. When you duplicate the Pivot item, the state of the
Display Details option is ignored.
2. The
Display Details option's changes cannot be reverted by the "Undo" and "Redo" Ribbon buttons.
Below you find a step-by-step instruction to create the extension from scratch. You can divide the task implementation to several parts:
Interactivity action code
1.
Create a form that displays detailed data from the clicked item. This extension uses
XtraForm with
GridControl.
2.
Handle the
DashboardDesigner.DashboardItemClick event to get information about the clicked element. Call the
DashboardItemMouseHitTestEventArgs.GetUnderlyingData method to obtain the element's underlying data and display them in your custom form.
[C#]
voidDashboardItemClick(objectsender,DashboardItemMouseActionEventArgse){using(DetailDatadetailForm=newDetailData(e.GetUnderlyingData())){detailForm.ShowDialog();}}
3.
The Dashboard Designer raises the
DashboardDesigner.DashboardItemClick event when an end user clicks the expand / collapse button in a row or column or click an empty area. To skip displaying the details dialog in these case, handle the
DashboardDesigner.DashboardItemControlCreated event with the following logic:
[C#]
booldoNotShowDataForThisArea=false;voidPivotGridControl_MouseDown(objectsender,MouseEventArgse){PivotGridControlpivot=senderasPivotGridControl;PivotGridHitInfohi=pivot.CalcHitInfo(e.Location);doNotShowDataForThisArea=(hi.HitTest==PivotGridHitTest.Value&&hi.ValueInfo.ValueHitTest==PivotGridValueHitTest.ExpandButton)||(hi.HitTest==PivotGridHitTest.None);}
The
doNotShowDataForThisArea variable determines whether an end user clicked the allowed area.
Integration to Dashboard Designer
4.
To allow end users to enable or disable this functionality for a specific Pivot item when designing dashboard, add a custom button to the DashboardDesigner's
Ribbon toolbar.
Find the Page Group to which you can add your custom option. The following code snippet finds the
Pivot→
Data→
Interactivity group:
[C#]
RibbonControlribbon=targetDesigner.MenuManagerasRibbonControl;PivotToolsRibbonPageCategorycategory=ribbon.PageCategories.OfType<PivotToolsRibbonPageCategory>().First();DataRibbonPagepage=category.Pages.OfType<DataRibbonPage>().First();InteractivitySettingsRibbonPageGroupInteractivityGroup=page.Groups.OfType<InteractivitySettingsRibbonPageGroup>().First();
5.
Create your custom button and add it to the found group.
6.
Store information about items with enabled custom functionality. This extension uses a simple list of strings to store component names of items. As a variant, you can implement your own storage.
On the custom button click, add or remove the currently selected dashboard item's name to the storage:
[C#]
List<string>pivotItemsWithEnabledDetails;privatevoidShowDetatilsItem_ItemClick(objectsender,ItemClickEventArgse){if(targetDesigner.SelectedDashboardItemisPivotDashboardItem){if(isDetailsEnabled(targetDesigner.SelectedDashboardItem.ComponentName))pivotItemsWithEnabledDetails.Remove(targetDesigner.SelectedDashboardItem.ComponentName);elsepivotItemsWithEnabledDetails.Add(targetDesigner.SelectedDashboardItem.ComponentName);}UpdateButtonState();}
7.
Determine whether the custom functionality is enabled for an item by checking its name in the storage. Add this check to the
DashboardItemClick event handler.
You can aldo update your custom ribbon button's checked sate dynamically depending on the currently selected item. For this, handle the
DashboardDesigner.DashboardItemSelectionChanged event.
[C#]
voidDesigner_DashboardItemSelected(objectsender,DashboardItemSelectionChangedEventArgse){if(targetDesigner.Dashboard.Items[e.DashboardItemName]isPivotDashboardItem){UpdateButtonState();}}voidUpdateButtonState(){if(targetDesigner.SelectedDashboardItem==null)return;showDetatilsButton.Checked=IsDetailsEnabled(targetDesigner.SelectedDashboardItem.ComponentName);}
Save / load custom information
8. The next step is to save information about items with enabled option to a dashboard file. To add custom information to a dashboard file when saving it, handle the
DashboardDesigner.DashboardSaving event. The following code snippet serializes the collection of component names to
XDocument and passes it to the
UserData section intended for storing custom data:
[C#]
privatevoidDesigner_DashboardSaving(objectsender,DashboardSavingEventArgse){XmlSerializerxs=newXmlSerializer(typeof(List<string>));XDocumentxElement=newXDocument();using(XmlWriterxw=xElement.CreateWriter())xs.Serialize(xw,pivotItemsWithEnabledDetails);e.Dashboard.UserData=xElement.Root;}
9. To read this data further when opening a dashboard file, handle the
DashboardDesigner.DashboardLoaded event and deserialize data from UserData section in a similar manner.