WINUI 3 Datagrid, IsReadOnly setting by row?

106 Views Asked by At

i'm using the Community Toolkit datagrid within a WINUI 3 application. I can set a column's "IsReadOnly" property and make that column uneditable. But what i'd like to do is set the entire datagrid as read only, then a user selects a row, clicks on an edit button and only that row becomes editable. As far as i can tell, that isn't possible. Or i'm an idiot. Either is possible.

I can't seem to find any online material that says it's even possible. Column readonly sure, but not row.

1

There are 1 best solutions below

0
On

One way to do this is by creating a readonly flag:

Person.cs

public partial class Person : ObservableObject
{
    [ObservableProperty]
    private int _id;

    [ObservableProperty]
    private string? _name;

    [ObservableProperty]
    private bool _isReadOnly;
}

MainPageViewModel.cs

public partial class MainPageViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<Person> _people = new()
    {
        new Person { Id = 1, Name = "Michael", IsReadOnly = true },
        new Person { Id = 2, Name = "Jim", IsReadOnly = true },
        new Person { Id = 3, Name = "Pam", IsReadOnly = true },
        new Person { Id = 4, Name = "Dwight", IsReadOnly = true },

    };

then you can:

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    public MainPageViewModel ViewModel { get; } = new();
}

MainPage.xaml

<toolkit:DataGrid
    AutoGenerateColumns="False"
    ItemsSource="{x:Bind ViewModel.People, Mode=OneWay}">
    <toolkit:DataGrid.Columns>
        <toolkit:DataGridTextColumn
            Binding="{Binding Id}"
            Header="ID"
            IsReadOnly="True" />
        <toolkit:DataGridTemplateColumn Header="Name">
            <toolkit:DataGridTemplateColumn.CellTemplate>
                <DataTemplate x:DataType="local:Person">
                    <TextBox
                        Background="Transparent"
                        BorderBrush="Transparent"
                        BorderThickness="0"
                        CornerRadius="0"
                        IsReadOnly="{x:Bind IsReadOnly, Mode=OneWay}"
                        Text="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                </DataTemplate>
            </toolkit:DataGridTemplateColumn.CellTemplate>
        </toolkit:DataGridTemplateColumn>
        <toolkit:DataGridTemplateColumn Header="Read only">
            <toolkit:DataGridTemplateColumn.CellTemplate>
                <DataTemplate x:DataType="local:Person">
                    <CheckBox IsChecked="{x:Bind IsReadOnly, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                </DataTemplate>
            </toolkit:DataGridTemplateColumn.CellTemplate>
        </toolkit:DataGridTemplateColumn>
    </toolkit:DataGrid.Columns>
</toolkit:DataGrid>

NOTE: I'm using the CommunityToolkit.Mvvm NuGet package.