How to make a column with combobox in Avalonia Ui in DataGrid?

3.1k views Asked by At

Is it possible in Avalonia Ui DataGrid to implement a column with combobox editing cells, that is, to be able to edit a cell simply by opening this very combobox and the user can simply choose from the options provided ?. I tried to implement a DataGrid like this but ran into a problem. I connected the Nuget Avalonia.DataGrid library, connected the styles in App.axaml as it says. As a result, the combobox appears in the DataGrid, but there is no dropdown in it, although the same combobox works fine outside the DataGrid. What is wrong in this code?

//ViewModel
public List<int> Test3 {get;set;}

//View Window
<DataGrid Items="{Binding Tests}" SelectionMode="Single">
  <DataGrid.Columns>
    <DataGridTemplateColumn Width="*"  Header="Route" IsReadOnly="False">
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ComboBox x:Name="combo" Items="{Binding Path=DataContext.Test3, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>
        </DataTemplate> 
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
  </DataGrid.Columns>
</DataGrid>
2

There are 2 answers

1
frankenapps On

You forgot to add the property Tests to your ViewModel.

Also it would probably be good to have a conditional SelectedItem, but that's out of context...

I used this code:

//ViewModel
public List<int> Test3 { get; set; } = new List<int>(new int [] {1, 2, 3});
public List<int> Tests { get; set; } = new List<int>(new int[] { 1, 2 });


//XAML
<DataGrid Items="{Binding Tests}" SelectionMode="Single">
  <DataGrid.Columns>
    <DataGridTemplateColumn Width="*"  Header="Route" IsReadOnly="False">
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <ComboBox x:Name="combo" Items="{Binding Path=DataContext.Test3, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
  </DataGrid.Columns>
</DataGrid>

Which gives me that result: Screenshot

In case you did all that and your bindings are working, but you still did not get my result, you would need to provide further context (e.g. which Themes you used, on which operating you run the program, etc.).

0
Tobias Johansson On

Another possible solution is to use the Tag Property according to code example below.

<DataGrid x:Name="myDataGrid"
              Items="{CompiledBinding myDataGridItems}"
              SelectedItem="{CompiledBinding mySelectedItem}"
              Tag="{CompiledBinding myComboBoxItems}">
        <DataGrid.Columns>

            <DataGridTemplateColumn Header="Route">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ComboBox Items="{Binding Tag, ElementName=myDataGrid}"
                                  ItemTemplate="{StaticResource ComboBoxItemTemplate}" Background="Transparent" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

        </DataGrid.Columns>
    </DataGrid>