This example demonstrates how to embed a DevExpress Gantt Control in a dashboard loaded in WPF Viewer and bind the Gantt control to the dashboard's data. It uses a style selector to substitute the regular dashboard item with an arbitrary WPF control and handles its SizeChanged event to provide it with data.
The application displays a sample dashboard created in Visual Studio that contains the Grid dashboard item bound to Gantt-specific data (data fields contain hierarchical tasks, start and end values).
The main application's window contains the Gantt control placed in the ganttStyle style included in XAML as resource. The Gantt control is bound to the window's data context. The GanttControl's ItemsSource property is bound to the GanttTasks View Model's property declared in a POCO View Model.
The main application's window uses the DashboardControl.GridItemStyleSelector property to assign the ganttStyle style as the Grid dashboard item's content. The Gantt control is rendered and displayed instead of the GridDashboardItem.
The Gantt control's SizeChanged event is handled to feed the control with data. The handler code waits until the data load finishes and calls the DashboardControl.GetItemData method to obtain the MultiDimensionalData object that contains data for the embedded control. The ConfigureGanttTasks method converts data to the ObservableCollection<GanttTask> type. The resultant collection is assigned to the GanttTasks View Model's property.
This approach is not limited to DevExpress data-bound controls and can be used to embed any WPF control in a dashboard.
See also: