1. Home
  2. Forum
  3. Blazor
  4. Update value of control in modal edit at runtime?

Update value of control in modal edit at runtime?

Suppose I have a grid with its Mode set to EditMode.Dialog. In the grid I've created a custom template to capture user-entered data for records in the grid. How can I programatically change a value for a textbox on the modal when a combobox has changed? More specifically perhaps, how can I target the context used for the template with the razor.cs, as I cannot reference the control and target the Value directly?


<SfGrid @ref="MyGrid" TValue="MyClass">
  <SfDataManager AdaptorInstance="typeof(MyDataAdaptor)" Adaptor="Adaptors.CustomAdaptor" />
  <GridEditSettings Mode="EditMode.Dialog" />
  <Template>
    @{
      var myContext = (context as MyClass);
      <SfDropDownList @bind-Value="myContext.myDDProperty">
        <DropDownListEvents TItem="MyDDClass" TValue="int" ValueChange="OnDDChanged"></DropDownListEvents>
      </SfDropDownList>
      <SfTextBox @ref="MyTextBox" @bind-Value="myContext.myTBProperty" />
    }
  </Template>
@code {
  private async Task OnDDChanged(ChangeEventArgs<int, myddclass=""> args){
    var newValue = "My New Value"
    // I want to update the SfTextBox value to newValue here
    //MyTextbox.Value = newValue with a StateHasChanged() is not acceptable as "Component parameter 'Value' should not be set outside of it's component."
  }
}

8 Replies 1 reply marked as answer
NP Naveen Palanivel Syncfusion Team September 30, 2022 04:44 AM UTC

Hi Riley,

 

Sorry for the inconvenience. 

 

We are currently Validating the reported query at our end and we will update the further details within two days(Oct 4, 2022). Until then we appreciate your patience.

 

Regards,

Naveen Palanivel


NP Naveen Palanivel Syncfusion Team October 5, 2022 03:40 AM UTC

Hi Riley,


We checked you query and we would like to inform to use PreventRender false inside the valuechange event, PreventRender method  help you to avoid unnecessary re-rendering of the grid component . We have similar documentation In our UG documentation section. We attached the UG documentation link below, please refer for more information


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


Please let us know if you have any concerns.


Regards,

Naveen Palanivel


RG Riley Grant October 11, 2022 08:55 PM UTC

I'm not sure this is going to work for me as this suggested solution doesn't take into account the need for the custom GridEditSettings template in order to hide fields in the Grid but expose them in the Modal popup (and vice-versa) - unless I'm missing something.

In other words, the Grid should show specific fields (some of which are readonly), and the Modal edit popup should show specific fields that need to be edited. There are more fields in the popup than there are visible in the grid.

To extend my initial example a bit, Field1 and Field2 are arbitrary additional fields shown in the edit dialog popup but not shown in the grid. Field3 is shown in the grid but not showin in the dialog popup.



<SfGrid @ref="MyGrid" TValue="MyClass">
    <SfDataManager AdaptorInstance="typeof(MyDataAdaptor)" Adaptor="Adaptors.CustomAdaptor" />
    <GridEditSettings Mode="EditMode.Dialog" >
        <Template>
        @{
            var myContext = (context as MyClass);
            <SfTextBox @bind-Value="myContext.Property1" />
            <SfTextBox @bind-Value="myContext.Property2" />

            <SfDropDownList @bind-Value="myContext.myDDProperty">
                <DropDownListEvents TItem="MyDDClass" TValue="int" ValueChange="OnDDChanged"></DropDownListEvents>
            </SfDropDownList>
            <SfTextBox @ref="MyTextBox" @bind-Value="myContext.myTBProperty" />
        }
        </Template>
    </GridEditSettings>
    <GridColumns>
        <GridColumn Field="@nameof(MyClass.ID)" Visible="false" />
        <GridColumn Field="@nameof(MyClass.myDDProperty" HeaderText="MyDDProperty" />
        <GridColumn Field="@nameof(MyClass.myTTProperty" HeaderText="MyTTProperty" />
        <GridColumn Field="@nameof(MyClass.field3" HeaderText="Field3" />
    </GridColumns>
@code {
    private async Task OnDDChanged(ChangeEventArgs<int, myddclass=""> args){
        var newValue = "My New Value"
        // I want to update the SfTextBox value to newValue here
        //MyTextbox.Value = newValue with a StateHasChanged() is not acceptable as "Component parameter 'Value' should not be set outside of it's component."
    }
}

NP Naveen Palanivel Syncfusion Team October 14, 2022 02:39 AM UTC

Hi Riley,


We checked your query and we would like to inform that we prepared the sample based on the requirement. We attached the sample in this requirement. Please refer the code snippet and sample for your reference


                        <div >

                            <label>Ship City</label>

                            <SfDropDownList ID="ShipCity" @bind-Value="@(Order.ShipCity)" TItem="OrdersDetails" TValue="string" DataSource="@GridData">

                               <DropDownListEvents TItem="OrdersDetails"  TValue="string"  ValueChange="@((args)=>ValueChangeHandler(args,Order))"></DropDownListEvents>

                            <DropDownListFieldSettings Value="ShipCity" Text="ShipCity"></DropDownListFieldSettings>

                                

                            </SfDropDownList>

                        </div>

                  

                    

                    <br>

                    <div >

                        <div >

                            <label >Ship Address</label>

                            <SfTextBox ID="ShipAddress" @bind-Value="@(Order.ShipAddress)"></SfTextBox>

                        </div>

                    </div>

    public void ValueChangeHandler(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string,OrdersDetails>args,OrdersDetails val)

    {

         Grid.PreventRender(false);

        val.ShipAddress = args.Value;

      

    }



Please let us know if you have any concerns.


Regards,

Naveen Palanivel


Attachment: Gridvalue_cab1d4fe.zip

Marked as answer
RG Riley Grant October 14, 2022 04:27 AM UTC

That works perfectly. Thank you!


NP Naveen Palanivel Syncfusion Team October 18, 2022 12:05 AM UTC

Hi Riley,


Welcome


Please get back to us if you need further assistance.


Regards,

Naveen Palanivel.


MS Markus Strobl March 6, 2023 03:29 PM UTC

Is this still the latest state or is there a better solution available to see changes in an edit dialog reflected automatically when the underlying state changes?

TBH having to call this Method to reflect the changes (and restore a behavior that was working previously) is a horrible workaround as it's very easy to forget. Also it forces your customers to consider internal implementation details which does not show a good API design.


NP Naveen Palanivel Syncfusion Team March 15, 2023 04:10 AM UTC

Hi Markus


We would like to inform that, whenever  we change the value in the value change event ,grid will be re-render. So reported issue occurs. To overcome the issue we just prevent the Grid re-render by using Grid.PreventRender(false)  in Value change event. It is the default behavior.


                        <div >

                            <label>Ship City</label>

                            <SfDropDownList ID="ShipCity" @bind-Value="@(Order.ShipCity)" TItem="OrdersDetails" TValue="string" DataSource="@GridData">

                               <DropDownListEvents TItem="OrdersDetails"  TValue="string"  ValueChange="@((args)=>ValueChangeHandler(args,Order))"></DropDownListEvents>

                            <DropDownListFieldSettings Value="ShipCity" Text="ShipCity"></DropDownListFieldSettings>

                            </SfDropDownList>

                        </div>

                    

                    <br>

                    <div >

                        <div >

                            <label >Ship Address</label>

                            <SfTextBox ID="ShipAddress" @bind-Value="@(Order.ShipAddress)"></SfTextBox>

                        </div>

                    </div>

    public void ValueChangeHandler(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string,OrdersDetails>args,OrdersDetails val)

    {

         Grid.PreventRender(false);

        val.ShipAddress = args.Value;

      

    }



Please let us know if you have any concerns.


Regards,

Naveen Palanivel


Loader.
Up arrow icon