Form - Creating checkbox list from collection

1 Answer 22 Views
Checkbox Form
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
Martin Herløv asked on 23 May 2024, 02:05 PM | edited on 23 May 2024, 04:18 PM

Hi, I have a object with a collection that I want to bind to checkboxes.

public class JasminUserAdProperties()
{
[Required]
public string Email { get; set; }
[Required]
public string Name { get; set; }

/// <summary>
/// Used for checkboxes
/// </summary>
public List<AdGroupDto> Groups { get; set; } = [];
}

And this is the form / component

@using Zeus.Shared.DTO

<TelerikWindow Width="450px" Centered="true" Visible="@(AdProperties != null)" Modal="true">
<WindowTitle>
<strong>Set Jasmin roles</strong>
</WindowTitle>
<WindowActions>
<WindowAction Name="Close" OnClick="@CancelUpdateJasminRoles"/>
</WindowActions>
<WindowContent>
<TelerikForm Model="@AdProperties" OnValidSubmit="@UpdateJasminRoles">
<FormValidation>
<DataAnnotationsValidator/>
</FormValidation>
<FormItems>
@{
<FormItem>
<Template>
<label for="selectAllCheckbox">Selected All</label>
<TelerikCheckBox Id="selectAllCheckbox"
Value="@SelectAllValue"
ValueChanged="@((bool value) => ValueChanged(value))"
Indeterminate="@SelectAllIndeterminate"/>
</Template>
</FormItem>
foreach (var group in AdProperties.Groups.OrderBy(g => g.Name))
{
<FormItem>
<Template>
<label for="@group.Id">@group.Name</label>
<TelerikCheckBox @bind-Value="@group.Selected" Id="@group.Id" Name="@group.Id"/>
</Template>
</FormItem>
}
}

</FormItems>
<FormButtons>
<TelerikButton Enabled="@CanEdit" ButtonType="ButtonType.Submit" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Save</TelerikButton>
<TelerikButton OnClick="@CancelUpdateJasminRoles">Cancel</TelerikButton>
</FormButtons>
</TelerikForm>
</WindowContent>
</TelerikWindow>

@code {

[Parameter] public EventCallback<JasminUserAdProperties> UpdateRoles { get; set; }

[Parameter] public EventCallback CancelUpdateRoles { get; set; }


[Parameter] public JasminUserAdProperties AdProperties { get; set; }

[Parameter] public bool CanEdit { get; set; }


private bool SelectAllValue => AdProperties.Groups.All(eq => eq.Selected);
private bool SelectAllIndeterminate => AdProperties.Groups.Any(eq => eq.Selected);

private void ValueChanged(bool value)
{
AdProperties.Groups.ForEach(eq => { eq.Selected = value; });
}

private void CancelUpdateJasminRoles()
{
if (CancelUpdateRoles.HasDelegate)
{
CancelUpdateRoles.InvokeAsync();
}
}

private void UpdateJasminRoles()
{
if (UpdateRoles.HasDelegate)
{
UpdateRoles.InvokeAsync(AdProperties);
}
}

}

I am getting this error(s) in spades.

blazor.webassembly.js:1  crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'Name'.
System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'Name'.
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName)
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
   at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)
   at Telerik.Blazor.Components.Common.TelerikInputBase`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].SetParametersAsync(ParameterView parameters)
   at Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].SetParametersAsync(ParameterView parameters)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)


Have been looking at Bind to nested (navigation) properties in complex objects but its not for lists.

What am I doing wrong?

 

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 27 May 2024, 04:02 PM

Hi Martin Herløv,

It seems the error you are encountering is due to the use of the Name attribute on the TelerikCheckBox component, which is not a valid property for this component. The Telerik UI for Blazor components have specific APIs, and any properties that are not part of these APIs will cause the error you're seeing.

To resolve the issue, remove the Name property:

foreach (var group in AdProperties.Groups.OrderBy(g => g.Name))
                    {
                        <FormItem>
                            <Template>
                                <label for="@group.Id">@group.Name</label>
                                <TelerikCheckBox @bind-Value="@group.Selected" Id="@group.Id" Name="@group.Id"/>
                            </Template>
                        </FormItem>
                    }

    Regards,
    Nadezhda Tacheva
    Progress Telerik

    Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
    Tags
    Checkbox Form
    Asked by
    Martin Herløv
    Top achievements
    Rank 2
    Bronze
    Iron
    Iron
    Answers by
    Nadezhda Tacheva
    Telerik team
    Share this question
    or