Two way binding of CheckBox in a DataGrid column

Radzen.Blazor Components
1

I'm struggling to get a checkbox in a datagrid to update the property associated with the item.

I began with code from here.

I bind the datagrid to a property in the page, that's a list of this simple class:

    public class LTIParameter
    {
        public LTIParameter(string id, string value, bool include=false)
        {
            Id = id;
            Value = value;
            Include = include;
        }

        public string Id    { get; set; }
        public string Value { get; set; }
        public bool Include { get; set; }
    }

This is the markup

        <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="50" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" Data="@LTIParameters" TItem="LTIParameter" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
            <Columns>
                <RadzenDataGridColumn TItem="LTIParameter" Property="Include" Title="Include" Sortable="false" Filterable="false" Width="20px" >
                    <Template Context="data">
                        <RadzenCheckBox @bind-value="data.Include" TValue="bool" TriState="true"  Name="Include"  Disabled="false" />
                    </Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="LTIParameter" Property="Id" Filterable="false" Title="LTI Launch Parameter" Frozen="true" Width="70px" TextAlign="TextAlign.Left" />
                <RadzenDataGridColumn TItem="LTIParameter" Property="Value" Title="Parameter Value" Width="80px" />
            </Columns>
        </RadzenDataGrid>

When the page displays the checkboxes appear but seem disabled, can't be clicked. What I want to do is have the "Include" property of the item set/unset as the user clicks the checkbox.

I'm pretty new to Blazor and not that familiar with its binding model, so any help is appreciated.

Thx

2

Should be bind-Value not bind-value

3

Hi enchev. I just adjusted it but no effect.

4

The Include property is boolean which doesn't support three state checkboxes. It needs to be nullable boolean or the checkbox should be normal (without TriState=true).

5

Hi korchev.

Yes, I added that while struggling to get some progress and just removed it, again no change. Checkboxes render and they get set as expected from the source data but when I click one nothing happens!

Here's the UI just FYI:

image
image456×541 12.7 KB

I am not fully yet understanding the specifics of two way binding in Blazor yet either, I've used that a lot with WPF though.

6

Just tested the following page and it worked as expected.

<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="50"
    AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" Data="@LTIParameters"
    TItem="LTIParameter" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
    <Columns>
        <RadzenDataGridColumn TItem="LTIParameter" Property="Include" Title="Include" Sortable="false"
            Filterable="false" Width="20px">
            <Template Context="data">
                <RadzenCheckBox @bind-Value="data.Include" TValue="bool?" TriState="true" Name="Include" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="LTIParameter" Property="Id" Filterable="false" Title="LTI Launch Parameter"
            Frozen="true" Width="70px" TextAlign="TextAlign.Left" />
        <RadzenDataGridColumn TItem="LTIParameter" Property="Value" Title="Parameter Value" Width="80px" />
    </Columns>
</RadzenDataGrid>
@code {

    public class LTIParameter
    {
        public string Id { get; set; }
        public string Value { get; set; }
        public bool? Include { get; set; }
    }

    LTIParameter[] LTIParameters = new [] { new LTIParameter { Include = true }, new LTIParameter { Include = false } };
}

checkboxes

Check the TValue is set to bool?.

1 Like
7

Ahh, let me take a look, that's a good example you have...

8

Incredible, it still refuses to work. I scrutinized your example made a few tiny changes so it seems to match but still fails.

Here is markup

<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="50"
                AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" Data="@LTIParameters"
                TItem="LTIParameter" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
    <Columns>
        <RadzenDataGridColumn TItem="LTIParameter" Property="Include" Title="Include" Sortable="false"
                              Filterable="false" Width="20px">
            <Template Context="data">
                <RadzenCheckBox @bind-Value="data.Include" TValue="bool?" TriState="true" Name="Include" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="LTIParameter" Property="Id" Filterable="false" Title="LTI Launch Parameter" 
            Frozen="true" Width="70px" TextAlign="TextAlign.Left" />
        <RadzenDataGridColumn TItem="LTIParameter" Property="Value" Title="Parameter Value" Width="80px" />
    </Columns>
</RadzenDataGrid>

I even exposed LTIParameters as an array (it was an IEnuerable before) but no effect.

I even removed constructor on my LTIParameter class (just in case there was a connection with that) but no effect, still fails.

9

Even removed the code from its code-behind and put it back into the razor file, no effect!

10

OK Fixed.

Not sure what's was happening exactly but I was exposing the data as a get property that returned an array. I changed it be simply a public field and it works.

11

It expects the data to be in a backing field, as soon as I return created data in the get (for all the parameters) it fails but if I return a backing field it works. I guess this is all expected. It was modifying the copied data rather than the modifying the data it was mapped to, this kind of makes sense...

Thanks very much for your help!

12

@Holmes sorry how exactly did you get this working? As I'm having exactly the same problem, data is loading and the bool property for each row is set correctly and yet the binding isn't showing any checked values.

I can't find any answers on this anywhere.