1. Home
  2. Forum
  3. Blazor
  4. SfCheckbox Disabled binding not updating

SfCheckbox Disabled binding not updating

I have a form with a series of checkboxes that need to be disabled based on the state of the other checkboxes (and some other flags). They aren't triggering the disabled state, though. I've tried replacing bind-Checked with direct calls to Checked and CheckedChanged and manually set the disabled state, but that isn't working either. I can see that the Disabled property is being set to true, but the control is still active. I've also tried explicitly calling StateHasChanged and not calling it, neither work. Is there something I'm missing, or is this a bug in Blazor?

This is essentially the setup I'm using:

<div class="form-group">
    <SfCheckBox @bind-Checked="@FirstOption"
                Disabled="SecondOption || ThirdOption"/>
</div>
<div class="form-group">
    <SfCheckBox @bind-Checked="@SecondOption"
                Disabled="FirstOption || ThirdOption" />
</div>
<div class="form-group">
    <SfCheckBox @bind-Checked="@ThirdOption"
               Disabled="FirstOption || SecondOption" />
</div>



5 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team July 15, 2021 10:48 AM UTC

 
Thanks for contacting Syncfusion Support. 
 
We have checked your query in our latest version 19.2.47. We cannot reproduce your reported issue in our end. For your reference we have prepared video demo and sample in the version 19.2.47. Please refer link below. 
 
 
 
@using Syncfusion.Blazor.Buttons 
 
<div class="form-group"> 
    <SfCheckBox Label="Option 1" @bind-Checked="@FirstOption" 
                Disabled="SecondOption || ThirdOption" /> 
</div> 
<div class="form-group"> 
    <SfCheckBox Label="Option 2" @bind-Checked="@SecondOption" 
                Disabled="FirstOption || ThirdOption" /> 
</div> 
<div class="form-group"> 
    <SfCheckBox Label="Option 3" @bind-Checked="@ThirdOption" 
                Disabled="FirstOption || SecondOption" /> 
</div> 
@code{ 
 
    public bool FirstOption = false; 
    public bool SecondOption = false; 
    public bool ThirdOption = false; 
} 
 
 

Please find the latest Nuget Package from the below link. 
 
 
If you are still facing the issue, kindly share the below details. 
 
·         If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 
·         Please check the issue in our latest version and let us know if you are facing issue. 
·         Please share us the video demonstration of this issue. 
·         Please share us the Syncfusion Package Version. 
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Aravinthan S 


CS Christopher Sturgess July 15, 2021 08:54 PM UTC

Alright, I tested and found it doesn't happen with regular checkboxes, but it DOES happen consistently with checkboxes in an SfGrid component's edit dialog. I've attached a sample showing the issue.


Attachment: CheckboxDisabledIssue_fa6f747c.7z


JP Jeevakanth Palaniappan Syncfusion Team July 16, 2021 10:59 AM UTC

Hi Christopher, 

We have checked your query and we have prevented the unnecessary component rendering to increase the performance. So the dialog is not rendered again when you change the checkbox state. Please refer the below code and the sample to achieve your requirement. 

    <SfGrid @ref="MyGrid" 
            DataSource="MyOptList ?? new List<Options>()" 
            TValue="Options" 
            Toolbar="@(new List<string>() { "Add", "Edit", "Delete" })"> 
        <GridEvents TValue="Options" OnActionComplete="ActionComplete"></GridEvents> 
.. 
 
@code{ 
 
    public void ActionComplete(ActionEventArgs<Options> args) 
    { 
        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add) || args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit)) 
        { 
            MyGrid.PreventRender(false); 
        } 
    } 
} 



Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


Marked as answer
CS Christopher Sturgess July 16, 2021 06:51 PM UTC

That has fixed my issue.

Is there any documentation about when this is turned on by default? The documentation you linked implies that you need to explicitly call PreventRender on components, but we haven't done that here and it's lead to a few problems where we don't know why things aren't rendering.


JP Jeevakanth Palaniappan Syncfusion Team July 19, 2021 12:40 PM UTC

Hi Christopher, 

Thanks for mentioning the problem you have faced. 

By default, the PreventRender is set as true for the dialog editing/adding to prevent the change detection for the grid when we change the value for input elements. This is implemented to improve the performance but this is not mentioned in the documentation. We have logged a documentation task for this. It will be refreshed ASAP. 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon