Dynamic DataGrid

1. Description

With this dataGrid, it's possible to add or remove columns dynamically, during the execution.

The screen below show a use of this dataGrid. The component displays only the datagrid. The implementation here provides Buttons to add or remove columns (and rows) during the run of the application that's is not possible withe default WPF DataGrid.

See the DevApp application example in the source code, witch implements this example.

The component is MVVM compliant.

2. How to use it

2.1. Xaml View: Declare the Library

The first step is to declare the library containing the dynamic DataGrid in the view. On the example below, its a Window, but it can be a UserControl. The component is defined in the library: MoellonToolkit.CommonDlgs.Impl.

<Window ...
    ...
    xmlns:mtkc="clr-namespace:MoellonToolkit.CommonDlgs.Impl.Components;assembly=MoellonToolkit.CommonDlgs.Impl"
    ...

2.2. Declare the link View-ViewModel of the dynamic grid

Two ways are possible to do that: declare the link in the application resource file , or in each view using the grid.

2.2.1. Declare it in the application resource file

With this method, you have to declare the link only one time in the application for all use of the component.

<DataTemplate DataType="{x:Type mtkc:DynDataGridVM}">
  <mtkc:DynDataGridView />
</DataTemplate>

2.2.2. Declare it in each view using the component

With this method, you must declare the link in each view using the dynamic datagrid.

First step is to declare the library path:

<UserControl ...
    xmlns:mtkc="clr-namespace:MoellonToolkit.CommonDlgs.Impl.Components;assembly=MoellonToolkit.CommonDlgs.Impl"

Then declare the link in the resources block of the User control (can be a Window):

<!-- declare this for the dynamic dataGrid component -->
<UserControl.Resources>
   <DataTemplate DataType="{x:Type mtkc:DynDataGridVM}">
      <mtkc:DynDataGridView />
   </DataTemplate>
</UserControl.Resources>

2.3. Xaml View: use the dynamic grid

First step, if its not done, is to declare the library path:

<UserControl ...
    xmlns:mtkc="clr-namespace:MoellonToolkit.CommonDlgs.Impl.Components;assembly=MoellonToolkit.CommonDlgs.Impl"

Then use the component, place it a parent container, for example:

 <DockPanel>
    ...
    <ContentPresenter Content="{Binding DynDataGridVM}"></ContentPresenter>

2.4. ViewModel: initialization

The dynamic dataGrid component need some objects to run: a factory and a model. The library provides default for both of them.

In your view Model, delcare a factory and a dataGrid Model:

  IDynDataGridFactory _factory;

  IDynDataGrid _dynDataGrid;

In the constructor, create these both objects:

 // use the default factory, to create dataModel and viewModel
 _factory = new DynDataGridFactory();

 // fill the datagrid model from the application model
 _dynDataGrid = FillDynDataGrid();
 DynDataGridVM = new DynDataGridVM(_factory, _dynDataGrid);

The function FillDynDataGrid() fill the dataGrid model with initial data: first columns and then rows.

 GridColumnString gridColString = new GridColumnString(colString.Name);
 _dynDataGrid.AddColumn(gridColString);

Create initial rows:

   // create cells of the row
   GridRow gridRow = new GridRow(dynDataGrid);

   //----create data cells
   IGridCell cell = new GridCellString(columnKey, "keyYes");
   row.AddCell(cell);

   cell = new GridCellString(columnValue, "Oui");
   row.AddCell(cell);

   // a checkbox, checked by default
   cell = new GridCellCheckBox(columnCheck, true);
   row.AddCell(cell);

2.4. ViewModel: use the dynamic grid

todo: adding, removing col

todo: adding, removing row