Current filter:
                                You should refresh the page.

                                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 adds the Display Details button to the ribbon. End users who design dashboards can enable or disable this functionality in the same manner as Drill-Down, Master Filtering, or other options.

                                The detailed data is displayed in a new form (XtraForm with GridControl). You can customize the form and grid in your own ways. For example, you can change the form's icon or apply one of the DevExpress skins.

                                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 that shows 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.
                                void DashboardItemClick(object sender, DashboardItemMouseActionEventArgs e) { using(DetailData detailForm = new DetailData(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:
                                bool doNotShowDataForThisArea = false; void PivotGridControl_MouseDown(object sender, MouseEventArgs e) { PivotGridControl pivot = sender as PivotGridControl; PivotGridHitInfo hi = 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 PivotDataInteractivity group:
                                RibbonControl ribbon = targetDesigner.MenuManager as RibbonControl; PivotToolsRibbonPageCategory category = ribbon.PageCategories.OfType<PivotToolsRibbonPageCategory>().First(); DataRibbonPage page = category.Pages.OfType<DataRibbonPage>().First(); InteractivitySettingsRibbonPageGroup InteractivityGroup = 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:
                                List<string> pivotItemsWithEnabledDetails; private void ShowDetatilsItem_ItemClick(object sender, ItemClickEventArgs e) { if(targetDesigner.SelectedDashboardItem is PivotDashboardItem) { if (isDetailsEnabled(targetDesigner.SelectedDashboardItem.ComponentName)) pivotItemsWithEnabledDetails.Remove(targetDesigner.SelectedDashboardItem.ComponentName); else pivotItemsWithEnabledDetails.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.
                                void Designer_DashboardItemSelected(object sender, DashboardItemSelectionChangedEventArgs e) { if(targetDesigner.Dashboard.Items[e.DashboardItemName] is PivotDashboardItem) { UpdateButtonState(); } } void UpdateButtonState() { 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:
                                private void Designer_DashboardSaving(object sender, DashboardSavingEventArgs e) { XmlSerializer xs = new XmlSerializer(typeof(List<string>)); XDocument xElement = new XDocument(); using (XmlWriter xw = 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.