DataGrid for .NET MAUI - Implement a Column Chooser

This example demonstrates how to implement a Data Grid column chooser.

Included controls and their properties:

• DataGridView: AutoGenerateColumnsModeDataGrid, TemplateColumn
• DXPopup: IsOpen
• DXCollectionView: ItemsSource, ItemTemplate, ReduceSizeToContent
• CheckEdit: IsChecked, Label, CheckBoxPosition

Implementation Details

• A Data Grid column chooser is displayed in the DXPopup control. DXPopup contains the DXCollectionView bound to the DataGridView.Column collection:

  <dxco:DXPopup x:Name="columnChooserPopup" ...>
      <dxcv:DXCollectionView ItemsSource="{Binding Source={Reference dataGrid}, Path=Columns}" ...>
          <dxcv:DXCollectionView.ItemTemplate>
              <DataTemplate>
                  <Grid>
                      <Border ...>
                          <dxe:CheckEdit IsChecked="{Binding IsVisible}" .../>
                      </Border>
                  </Grid>
              </DataTemplate>
          </dxcv:DXCollectionView.ItemTemplate>
      </dxcv:DXCollectionView>
  </dxco:DXPopup>

  File to Look At: MainPage.xaml

• Set the DXCollectionView.ReduceSizeToContent property to true to resize the DXCollectionView to fit its content:

  <dxcv:DXCollectionView ReduceSizeToContent="True" ...>
      <!-- ... -->
  </dxcv:DXCollectionView>

  File to Look At: MainPage.xaml

• To align the CheckEdit component's checkboxes to the right, set the CheckEdit.CheckBoxPosition property to CheckBoxPosition.End:

  <dxcv:DXCollectionView ...>
      <dxcv:DXCollectionView.ItemTemplate>
          <DataTemplate>
              <Grid>
                  <Border ...>
                      <dxe:CheckEdit CheckBoxPosition="End" .../>
                  </Border>
              </Grid>
          </DataTemplate>
      </dxcv:DXCollectionView.ItemTemplate>
  </dxcv:DXCollectionView>

  File to Look At: MainPage.xaml

• You can bind CheckEdit to the GridColumn.ActualCaption property to display the Data Grid's column caption:

  <dxcv:DXCollectionView ...>
      <dxcv:DXCollectionView.ItemTemplate>
          <DataTemplate>
              <Grid>
                  <Border ...>
                      <dxe:CheckEdit Label="{Binding ActualCaption}" .../>
                  </Border>
              </Grid>
          </DataTemplate>
      </dxcv:DXCollectionView.ItemTemplate>
  </dxcv:DXCollectionView>

  File to Look At: MainPage.xaml

• Specify the GridColumn.MinWidth property to a hide horizontal scroll bar when the total width of visible Data Grid columns is less than the width of the device's viewport:

  <dxg:DataGridView ...>
      <dxg:TemplateColumn FieldName="Country" MinWidth="150">
          <dxg:TemplateColumn.DisplayTemplate>
              <!-- ... -->
          </dxg:TemplateColumn.DisplayTemplate>
      </dxg:TemplateColumn>
      <dxg:TextColumn FieldName="CameFrom" MinWidth="120" .../>
      <dxg:TextColumn FieldName="TimeOnSite" MinWidth="120" .../>
      <dxg:TextColumn FieldName="LastPage" MinWidth="130" .../>
      <dxg:TextColumn FieldName="IsReturningUser" MinWidth="130" .../>
  </dxg:DataGridView>

  File to Look At: MainPage.xaml

Files to Look At

• MainPage.xaml
• MainPage.xaml.cs
• App.xaml

Documentation

• Featured Scenario: Column Chooser
• Featured Scenarios
• CollectionView
• DataGrid
• DXPopup

More Examples

• DevExpress Mobile UI for .NET MAUI