1. Home
  2. Forum
  3. Blazor
  4. Reset CheckBox Indeterminate from code behind

Reset CheckBox Indeterminate from code behind

Is there way to reset Indeterminate status of  SfCheckBox in code behind.

I am trying to build form with check box on inside which is required to choice.
When SfCheckBox is  in Indeterminate state first render of page is working ok , In code behind for @ref SfCheckBox  object I can check is Indeterminate status changed.
But since blazor is single-page I want to after submit (saving)  form to reset this check box to Indeterminate state (not selected). So on next submit of  form user need again to check true or false on checkbox

1 Reply
SD Saranya Dhayalan Syncfusion Team April 18, 2020 12:16 PM UTC

Hi Admir, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported query, we can achieve this by using the custom component. Please find the below code snippet: 
 
Index.razor: 
@using Syncfusion.Blazor.Buttons 
 
<EditForm Model="_exampleModel" OnValidSubmit="HandleValidSubmit"> 
 
    <TriCheckbox @bind-TriChecked="_exampleModel.IsValidatedDesign"></TriCheckbox> 
 
    <button type="submit">Submit</button> 
</EditForm> 
 
@code { 
    SfCheckBox checkbox; 
    private ExampleModel _exampleModel = new ExampleModel(); 
   
    private void HandleValidSubmit() 
    { 
        Console.WriteLine("OnValidSubmit"); 
        _exampleModel.IsValidatedDesign = null; 
    } 
 
    public class ExampleModel 
    { 
        public bool? IsValidatedDesign { get; set; } = null; 
    } 
} 
  
TriCheckbox.razor: 
<SfCheckBox Checked="@Convert.ToBoolean(TriChecked)" Indeterminate="@(TriChecked == null)" ValueChange="valueChangeHandler" @key="TriChecked" Name="@Name" Value="@Value" Label="@Label"></SfCheckBox> 
 
 
@code { 
    private bool isInderminate = false; 
    [Parameter] 
    public bool? TriChecked 
    { 
        get; 
        set; 
    } = null; 
 
 
    protected override void OnInitialized() 
    { 
        if (TriChecked == null) 
        { 
 
 
            isInderminate = true; 
        } 
        else 
            isInderminate = false; 
    } 
 
 
    [Parameter] 
    public EventCallback<bool?> TriCheckedChanged 
    { 
        get; 
        set; 
    } 
 
 
    [Parameter] 
    public string Name 
    { 
        get; 
        set; 
    } 
 
 
    [Parameter] 
    public string Value 
    { 
        get; 
        set; 
    } 
 
 
    [Parameter] 
    public string Label 
    { 
        get; 
        set; 
    } 
 
 
    [Parameter] 
    public EventCallback<TriCheckboxChange> TriCheckedValueChange 
    { 
        get; 
        set; 
    } 
 
 
    private void valueChangeHandler(Syncfusion.Blazor.Buttons.ChangeEventArgs args) 
    { 
        this.TriCheckedChanged.InvokeAsync(args.Checked); 
        TriCheckboxChange triArgs = new TriCheckboxChange(); 
        triArgs.TriChecked = args.Checked; 
        triArgs.Name = args.Name; 
        this.TriCheckedValueChange.InvokeAsync(triArgs); 
    } 
 
 
    public class TriCheckboxChange 
    { 
        public string Name; 
        public bool? TriChecked; 
    } 
} 
 
For your convenience we have prepared a sample. Please find the below sample link 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Saranya D 


Loader.
Up arrow icon