Modified Blazor Component Data inside a Grid isn't able to Post from a Parent Page

[Jaish Mathews]

Here attached the simplified application. Index.razor is the parent page and inside it has a component with a Syncfusion Grid. Data for this Grid is passing by the parent page Index.razor. What ever data changed inside Grid, after page load, isn't posting back even though changed data inside Index.razor is available after posting.

Attachment: BlazorApp1_5d3aa69c.zip

[Renjith Singh Rajendran]

Hi Jaish, 

 

Greetings from Syncfusion support. 

 

We suspect that you would like to update the componentViewModels list data when modifying the textbox value inside Grid. If so, then we suggest you to update the field values of componentViewModels inside the OnInput event handler of SfTextBox. And also we suggest you to maintain a unique field value in componentViewModels, so now based on this unique value you can update the row in componentViewModels. 

 

We are attaching a sample based on the above suggestion for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-603297645 

 

 

                 <GridColumn HeaderText="Policy Number" Width="120" Field="@nameof(ComponentViewModel.PolicyNumber)"> 

                         <Template Context="modelContext"> 

                                 @{ 

                                          var componentViewModel = (modelContext as ComponentViewModel); 

                                          <div class="row"> 

                                                  @*Maintain a unique valued field which cannot be edited*@ 

                                                  <SfTextBox OnInput="(e)=>OnInputPolicyNumber(e,componentViewModel.UniqueField)" Value="@componentViewModel.PolicyNumber"></SfTextBox> 

                                          </div> 

                                 } 

                         </Template> 

                 </GridColumn> 

                 <GridColumn HeaderText="Policy Type" Width="120" Field="@nameof(ComponentViewModel.PolicyType)"> 

                         <Template Context="modelContext"> 

                                 @{ 

                                          var componentViewModel = (modelContext as ComponentViewModel); 

                                          <div class="row"> 

                                                  @*Pass the unique valued field as argument for OnInput event*@ 

                                                  <SfTextBox OnInput="(e)=>OnInputPolicyType(e,componentViewModel.UniqueField)" Value="@componentViewModel.PolicyType"></SfTextBox> 

                                          </div> 

                                 } 

                         </Template> 

                 </GridColumn> 

 

        public void OnInputPolicyNumber(ChangeEventArgs args, int UniqueField) 

        { 

                 this.componentViewModels.Where(e => e.UniqueField == UniqueField).FirstOrDefault().PolicyNumber = args.Value.ToString(); 

        } 

        public void OnInputPolicyType(ChangeEventArgs args, int UniqueField) 

        { 

                 this.componentViewModels.Where(e => e.UniqueField == UniqueField).FirstOrDefault().PolicyType = args.Value.ToString(); 

        } 

 

 

And also we would like to inform you that, the Column Template feature of Grid is to display customized Grid cell contents. So if you need to perform any custom data operations, then it is suggested to handle the data related customization actions manually as like the above suggested solution. Please get back to us if you need further assistance. 

 

Regards, 

Renjith R