Dynamically disable controls in SfGrid Template

[Daniel]

I use a template to edit the data of a SfGrid. In that template I want to dynamically enable/disable controls (SfTextBox, SfMultiSelect) based on the value the users chooses in a SfDropDownList. The event handler attachted to the SfDropDownList ValueChange event fires and updates the isDisabled variable but that has no effect on the controls. Even a StateHasChanged() doesn't help.

This is the SfGrid definition

            <SfGrid @ref="Grid" DataSource="@GridData" Toolbar="Toolbaritems">

                <GridEvents OnToolbarClick="ToolbarClickHandler" OnActionComplete="ActionCompleteHandler" TValue="WeatherForecast"></GridEvents>

                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams" >

                    <Template>

                        @{

                            var wf = (context as WeatherForecast);

                        }

                        <div>

                            <div class="form-group col-md-12">

                                <SfDropDownList ID="Type" TValue="RecurrencePatternType" TItem="string" @bind-Value="@(wf.Type)" DataSource="@RecurrencePatternTypes" Placeholder="Type">

                                    <DropDownListEvents TValue="RecurrencePatternType" TItem="string" ValueChange="onValueChange"></DropDownListEvents>

                                </SfDropDownList>

                            </div>

                            <div class="form-row">

                                <div class="form-group col-md-12">

                                    <SfTextBox ID="Summary" Disabled=@isDisabled @bind-Value="@(wf.Summary)" Placeholder="Summary"></SfTextBox>

                                </div>

                            </div>

                            <div class="form-row">

                                <div class="form-group col-md-12">

                                    <SfMultiSelect ID="Days" @bind-Value="@(wf.DaysOfWeek)" Disabled=@isDisabled TValue="List<System.DayOfWeek>" TItem="System.DayOfWeek" DataSource="@EnumValues" Mode="@VisualMode.Box" Placeholder="Select Day of Week"></SfMultiSelect>

                                </div>

                            </div>

                        </div>

                    </Template>

                </GridEditSettings>

                <GridColumns>

                    <GridColumn Field=@nameof(WeatherForecast.Summary) HeaderText="Summary" Width="150"></GridColumn>               

                </GridColumns>

            </SfGrid>

In the code behinde class there is the isDiabled property:

private bool isDisabled { get; set; } = false;

and the event handler:

        private void onValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<RecurrencePatternType, string> args)

        {            

            this.isDisabled = args.Value != RecurrencePatternType.Weekly;

            this.StateHasChanged();

        }

The Enabled property of the controls has the same effect - it is only evaluated once the template form is loaded, but not after the user changes the value of the DropDownList.

Am I doing something wrong or is this a bug?

[Vignesh Natarajan]

Hi Daniel,  

 

Thanks for contacting Syncfusion support.  

 

Query: “The event handler attachted to the SfDropDownList ValueChange event fires and updates the isDisabled variable but that has no effect on the controls” 

 

We have analyzed your query and we understand that you are facing trouble in disable/enable the MultiSelect component in dialog editing based on dropdown list component. We are able to reproduce the reported behavior at our end while preparing a sample as per your suggestion.  

 

This is because we have prevented the rendering of Grid component, unnecessarily on external action due to some performance reasons. Hence the reported issue occur. We suggest you to overcome the reported issue by calling the PreventRender() method of Grid with false arguments in the DropDownList’s ValueChange event.  

 

Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@GridData" Toolbar="Toolbaritems"> 

    <GridEvents OnToolbarClick="ToolbarClickHandler" OnActionComplete="ActionCompleteHandler" TValue="WeatherForecast"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams"> 

        <Template> 

            @{ 

                var wf = (context as WeatherForecast); 

            } 

            <div> 

                <div class="form-group col-md-12"> 

                    <SfDropDownList ID="Type" TValue="RecurrencePatternType" TItem="string" @bind-Value="@(wf.Type)" DataSource="@RecurrencePatternTypes" Placeholder="Type"> 

                        <DropDownListEvents TValue="RecurrencePatternType" TItem="string" ValueChange="onValueChange"></DropDownListEvents> 

                    </SfDropDownList> 

                </div> 

                <div class="form-row"> 

                    <div class="form-group col-md-12"> 

                        <SfTextBox ID="Summary" Disabled=@isDisabled @bind-Value="@(wf.Summary)" Placeholder="Summary"></SfTextBox> 

                    </div> 

                </div> 

                <div class="form-row"> 

                    <div class="form-group col-md-12"> 

                        <SfMultiSelect ID="Days" @bind-Value="@(wf.DaysOfWeek)" Disabled=@isDisabled TValue="List<System.DayOfWeek>" TItem="System.DayOfWeek" DataSource="@EnumValues" Mode="@VisualMode.Box" Placeholder="Select Day of Week"></SfMultiSelect> 

                    </div> 

                </div> 

            </div> 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(WeatherForecast.Summary) HeaderText="Summary" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    private bool isDisabled { get; set; } = false; 

    public List<Order> Orders { get; set; } 

  

    private void onValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<RecurrencePatternType, string> args) 

    { 

        this.isDisabled = args.Value != RecurrencePatternType.Weekly; 

        Grid.PreventRender(false); 

    } 

 

We have already documented this topic in our UG documentation. Kindly refer the below sample for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/how-to/cascading-dropdownlist-with-grid-editing/  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan