MultiSelect DataGrid checkboxes always editable

[RealityMasque]

Hi,

I have a multiselect datagrid with a multiselect column. Even when I set DataGrid.Editable = false & DataGridMultiSelectColumn.Editable = false, the checkboxes are still checkable. How do I make the checkboxes not interactable when the component is not in an edit state, & vice versa?

The following example still allows users to check/uncheck the checkboxes:

<DataGrid TItem="Foo" 
          Data="@foos"
          PageSize="1000000"
          FixedHeader="true"
          Filterable="true"
          Sortable="true"
          Editable="false"
          SelectedRows="@selectedFoos"
          SelectionMode="DataGridSelectionMode.Multiple">
    <DataGridColumns>
        <DataGridMultiSelectColumn Editable="false" />
        <DataGridColumn TItem="EcuInfo" Field="@nameof(Foo.Acronym)" Caption="Acronym" />
        <DataGridColumn TItem="EcuInfo" Field="@nameof(Foo.Name)" Caption="Name" />
    </DataGridColumns>
</DataGrid>

Thanks,

Orion

[RealityMasque]

anyone?

[David-Moreira]

I don't think we've implemented that use case.
Multiple selection is always active once you enable it.

The fact that the Editable parameter exists in that column..., is one of those cases where it does from inheritance. Maybe that wasn't 100% appropriate.
The Editable refers to being able to edit a value in a Data Item when it's on Edit Mode. So here the usage would be confusing as to whether it would always make it disabled always or just when on Edit Mode, also this is a column that's tipically not part of the Data Item...

Anyways we can still consider it. What do you think @stsrki ?

As for a workaround I'm thinking you should be able to override the MultiSelectTemplate and render the checkbox disabled or not according to your needs.

[RealityMasque]

ah, I guess I misunderstood the terminology. so I tried providing specific markup for the MultiSelectTemplate. We use permissions checks for being able to edit items in a data grid, but a custom modal for single record editing. & setting Editable from code seemed to leave the checkboxes uneditable, both in the header & in each row.

[RealityMasque]

No. Specific markup for the MultiSelectTemplate made the checkboxes uncheckable. I can provide a code sample in a bit.

[RealityMasque]

using idea from here: #1749

[RealityMasque]

Here's an example of what I'm trying to do, where providing specific markup for the MultiSelectTemplate doesn't work as expected. Basically, I'd like to have a list of items that, as they are checked, populates another list real time. Currently, the code I ended up using (diff from below) populates a bound selected list, & when the selections need to be saved, the selected list gets assigned to the data model. it'd be great if the code could have a master list, where checking & unchecking items populates the data model in real time. plus, it'd be nice to have the form have a view & edit mode, where the checkboxes can't be checked when in view mode.

@page "/"

<Card Shadow="Shadow.Large" Margin="Margin.Is5">
    <CardBody Padding="Padding.Is5">
        <Button Color="Color.Secondary" Clicked="OnChangeEditStateClicked">Change Edit State</Button>
        <br/>
        Edit State = @isEditState
        <br /><br />
        <DataGrid TItem="Foo"
                  Data="@allFoos"
                  PageSize="1000000"
                  FixedHeader="true"
                  Filterable="true"
                  Sortable="true"
                  Editable="@isEditState"
                  SelectionMode="DataGridSelectionMode.Multiple">
            <DataGridColumns>
                <DataGridMultiSelectColumn TItem="Foo" Editable="@isEditState">
                    <MultiSelectTemplate>
                        <Blazorise.Check TValue="bool" Disabled="@(!isEditState)" CheckedChanged="@((isChecked) => { OnCheckChanged(isChecked, context.Item); context.SelectedChanged.InvokeAsync(isChecked); })" />
                    </MultiSelectTemplate>
                </DataGridMultiSelectColumn>
                <DataGridColumn TItem="Foo" Field="@nameof(Foo.Acronym)" Caption="Acronym" />
                <DataGridColumn TItem="Foo" Field="@nameof(Foo.Name)" Caption="Name" />
            </DataGridColumns>
        </DataGrid>
        <br /><br />
        My Foos
        <br />
        <ListView TItem="Foo"
                  Data="myFoos"
                  TextField="(item) => item.Name"
                  ValueField="(item) => item.Acronym"
                  Mode="ListGroupMode.Static"
                  MaxHeight="300px">
        </ListView>
    </CardBody>
</Card>

@code {
    public class Foo
    {
        public Foo()
        {
            Acronym = "";
            Name = "";
        }

        public string? Acronym { get; set; }

        public string? Name { get; set; }
    }

    private List<Foo> allFoos = new List<Foo>
    {
        new Foo { Acronym = "a1", Name = "n1" },
        new Foo { Acronym = "a2", Name = "n2" },
        new Foo { Acronym = "a3", Name = "n3" },
        new Foo { Acronym = "a4", Name = "n4" },
        new Foo { Acronym = "a5", Name = "n5" },
        new Foo { Acronym = "a6", Name = "n6" },
        new Foo { Acronym = "a7", Name = "n7" },
        new Foo { Acronym = "a8", Name = "n8" }
    };

    private List<Foo> myFoos = new List<Foo>();

    private bool isEditState = false;

    private void OnChangeEditStateClicked()
    {
        isEditState = !isEditState;
    }

    private void OnCheckChanged(bool isChecked, Foo foo)
    {
        if (isChecked)
        {
            myFoos.Add(foo);
        }
        else
        {
            myFoos.Remove(foo);    
        }
    }
}

[David-Moreira]

Hello @RealityMasque
It seems there's an issue with the DataGridMultiSelectColumn, where even if you have your own custom template, just clicking inside the column triggers the selection for the row internally. I have to take a more thorough look at that, I'll open an issue.

As an alternative, you can use a regular column, and introduce PreventRowClick to make it so the selection only happens when the edit state flag is set to true.

Please find the working code below:

<Card Shadow="Shadow.Large" Margin="Margin.Is5">
    <CardBody Padding="Padding.Is5">
        <Button Color="Color.Secondary" Clicked="OnChangeEditStateClicked">Change Edit State</Button>
        <br />
        Edit State = @isEditState
        <br /><br />
        <DataGrid TItem="Foo"
                  Data="@allFoos"
                  PageSize="1000000"
                  FixedHeader="true"
                  Filterable="true"
                  Sortable="true"
                  Editable="@isEditState"
                  SelectionMode="DataGridSelectionMode.Multiple"
        @bind-SelectedRows="myFoos">
            <DataGridColumns>
                <DataGridColumn PreventRowClick TItem="Foo" Editable="@isEditState">
                    <DisplayTemplate>
                        <Blazorise.Check TValue="bool" Disabled="@(!isEditState)" CheckedChanged="@((isChecked) => { OnCheckChanged(isChecked, context); })" />
                    </DisplayTemplate>
                </DataGridColumn>
                 <DataGridColumn PreventRowClick TItem="Foo" Field="@nameof(Foo.Acronym)" Caption="Acronym" />
                 <DataGridColumn PreventRowClick TItem="Foo" Field="@nameof(Foo.Name)" Caption="Name" />
            </DataGridColumns>
        </DataGrid>
        <br /><br />
        My Foos
        <br />
        <ListView TItem="Foo"
                  Data="myFoos"
                  TextField="(item) => item.Name"
                  ValueField="(item) => item.Acronym"
                  Mode="ListGroupMode.Static"
                  MaxHeight="300px">
        </ListView>
    </CardBody>
</Card>

@code {
    public class Foo
    {
        public Foo()
        {
            Acronym = "";
            Name = "";
        }

        public string? Acronym { get; set; }

        public string? Name { get; set; }
    }

    private List<Foo> allFoos = new List<Foo>
    {
        new Foo { Acronym = "a1", Name = "n1" },
        new Foo { Acronym = "a2", Name = "n2" },
        new Foo { Acronym = "a3", Name = "n3" },
        new Foo { Acronym = "a4", Name = "n4" },
        new Foo { Acronym = "a5", Name = "n5" },
        new Foo { Acronym = "a6", Name = "n6" },
        new Foo { Acronym = "a7", Name = "n7" },
        new Foo { Acronym = "a8", Name = "n8" }
    };

    private List<Foo> myFoos = new List<Foo>();

    private bool isEditState = false;

    private void OnChangeEditStateClicked()
    {
        isEditState = !isEditState;
    }

    private void OnCheckChanged( bool isChecked, Foo foo )
    {
        if ( isChecked )
        {
            myFoos.Add( foo );
        }
        else
        {
            myFoos.Remove( foo );
        }
    }
}

[RealityMasque]

thanks @David-Moreira !