SingleColumnKanbanView

DataGrid for .NET MAUI - Replicate a Single-Column Kanban View

This example demonstrates how to implement a Kanban-like view based on our Data Grid. In this solution, the Data Grid contains multiple groups (Planned, Coding, Testing, and Done) with items. You can drag and drop items between groups.

Included control and its properties:

• DataGridView: IsColumnHeaderVisible, AllowDragDropRows, AllowDragDropSortedRows, AllowGroupCollapse, CustomSort, CustomGroup, CompleteRowDragDrop, DragRow, GroupRowAppearance, CellAppearance, GroupRowTemplate, TemplateColumn

Implementation Details

• You can handle the DataGridView.CustomSort event to sort groups in ascending or descending order:

  private void DataGridView_CustomSort(object sender, DevExpress.Maui.DataGrid.CustomSortEventArgs e) {
      if (e.Column.FieldName == "Stage")
          e.Result = Comparer.Default.Compare(viewModel.StageOrder[(string)e.Value1], viewModel.StageOrder[(string)e.Value2]);
  }

  File to Look At: MainPage.xaml.cs

• If a group is empty, Data Grid can display a placeholder based on the Border control. To display placeholders, handle the CompleteRowDragDrop event, enable the IsPlaceholder property, and use .NET MAUI triggers to conditionally display an element that contains the placeholder:

  <dxg:TemplateColumn FieldName="Title">
      <dxg:TemplateColumn.DisplayTemplate>
          <DataTemplate>
              <Grid>
                  <Border ...>
                      <Border.Triggers>
                          <DataTrigger Binding="{Binding Item.IsPlaceholder}" Value="False" TargetType="Border">
                              <Setter Property="IsVisible" Value="True"/>
                          </DataTrigger>
                      </Border.Triggers>
                  </Border>
                  <Border IsVisible="False" BackgroundColor="Transparent">
                      <Label Text="Drag Items here" Margin="10,20,10,20" HorizontalOptions="Center"/>
                      <Border.Triggers>
                          <DataTrigger Binding="{Binding Item.IsPlaceholder}" Value="True" TargetType="Border">
                              <Setter Property="IsVisible" Value="True"/>
                          </DataTrigger>
                      </Border.Triggers>
                  </Border>
              </Grid>
          </DataTemplate>
      </dxg:TemplateColumn.DisplayTemplate>
  </dxg:TemplateColumn>

  File to Look At: MainPage.xaml

  private void DataGridView_CompleteRowDragDrop(object sender, DevExpress.Maui.DataGrid.CompleteRowDragDropEventArgs e) {
      AddPlaceholderTaskToSourceGroup();
      RemovePlaceholderTaskFromTargetGroup();
  }
  
  void AddPlaceholderTaskToSourceGroup() {
      if (!viewModel.Tasks.Any(t => t.Stage == draggedTaskOriginalStage)) {
          viewModel.Tasks.Add(new TaskToDo() { IsPlaceholder = true, Stage = draggedTaskOriginalStage });
      }
  }
  
  void RemovePlaceholderTaskFromTargetGroup() {
      string newDraggedTaskStage = draggedItem.Stage;
      TaskToDo stabTask = viewModel.Tasks.FirstOrDefault(t => t.Stage == newDraggedTaskStage && t.IsPlaceholder);
      if (stabTask != null) {
          viewModel.Tasks.Remove(stabTask);
      }
  }

  File to Look At: MainPage.xaml.cs

Files to Look At

• MainPage.xaml
• MainPage.xaml.cs
• MainViewModel.cs

Documentation

• Featured Scenario: Data Grid - Replicate Kanban View
• Featured Scenarios
• Data Grid

More Examples

• DevExpress Mobile UI for .NET MAUI