Changing element value programmatically in edit template

[Steve]

Hello, I am using sfgrid and edit template for dialog editing mode, I have a checkbox and 2 textboxes, if the checkbox is checked, the second textbox will be disabled and the value sync with the first, but I am having difficulties getting the second texbox update the value, but if I save the changes, the value can be updated correctly. I can see the value update in real time if the elements are not in the edit template. What I need to do is to get the second textbox change its value as I type in the first and see it enabled/disabled. I have enclosed my test project and hopefully anyone can point me to the right direction. Thank you very much.

Attachment: BlazorApp1_4dd7bd87.zip

[Renjith Singh Rajendran]

Hi Steve, 

Greetings from Syncfusion support. 

Query : What I need to do is to get the second textbox change its value as I type in the first and see it enabled/disabled. 

We have analyzed your shared sample, and we could see that you have already achieved this requirement in the shared application. When typing in 1^st Textbox, the value of 2^nd Textbox got updated. We are attaching the behavior which we have faced while running the attached sample. 

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/updatingtextbox912946504 

 

So based on our analysis, we could see that you have already achieved this requirement (i.e. Change value in 2^nd Textbox when typing in 1^st Textbox) in your sample. If we have misunderstood your query, then kindly share with us the following details to proceed further. 

1. Share with us a detailed explanation showing the problem you are facing.
2. Share the video demo explaining your requirement.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran 

[Steve]

I am having difficulties to do this in edit template, but when I tried doing it outside the Sfgrid, i.e. what your video shows, it worked, my goal is to do that in the Sfgrid dialog edit mode edit template. Please check my test project again, that part is not working. Thanks in advance.

[Renjith Singh Rajendran]

Hi Steve, 

Thanks for your update. 

Based on this scenario, we suggest you to bind OnActionComplete event to Grid, and set the PreventRender to false, based on RequestType as BeginEdit or Add. Please refer and use the codes below, 

 

<GridEvents ... OnActionComplete="OnActionComplete" TValue="Table1"></GridEvents> 

 

using Action = Syncfusion.Blazor.Grids.Action;void OnActionComplete(ActionEventArgs<Table1> args){    if(args.RequestType.Equals(Action.BeginEdit) || args.RequestType.Equals(Action.Add))    {        args.PreventRender = false;    }}

Reference : https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance/#avoid-unnecessary-component-renders 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Steve]

Thank you. It worked like magic, but it's also significantly slower than the textboxes outside the grid. Nothing we can do at this time I guess?

[Renjith Singh Rajendran]

Hi Steve, 

We suggest you to render the content of Dialog Template as a separate component to overcome the reported problem and achieve this requirement. We are also attaching the sample for your convenience, please download and refer the sample from the link below, 

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

 

 

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

    <Template> 

        @{ 

            var table1 = context as Table1; 

            <DialogTemplate Text2Enabled="Text2Enabled" table1="@table1"></DialogTemplate> 

        } 

    </Template> 

</GridEditSettings> 

[DialogTemplate.razor] 

<div>    <div class="form-row">        <label>ID</label>        <SfNumericTextBox @bind-Value="@table1.Id"></SfNumericTextBox>    </div>    ...</div>    ...    [Parameter]    public Table1 table1 { get; set; }    [Parameter]    public bool Text2Enabled { get; set; }

         … 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Steve]

Thank you for your solution, and it worked perfectly.

But when I do the same with SfUploader, it displays an error in Chrome as follows:

>Uncaught TypeError:      sf-uploader-596b4b.min.js:1

this.listParent.querySelector is not a function

     at h.removeFocus (sf-uploader-596b4b.min.js:1)

I have enclosed my test project. To reproduce it, please go to Table1s page, edit a record, select a file in the first SfUploader, and check the sync5n6 checkbox.

It should be something to do with the selecting and removing file programmatically, but I couldn't find the right way to do it. Hopefully you can shine some light on it.

Thanks in advance.

Attachment: BlazorApp1_df4a5fbb.zip

[Renjith Singh Rajendran]

Hi Steve,  

  

Can you please share the exact use case scenario for making the sample in this way to achieve the requirement that will help us to check and proceed further at our end?  

  

Regards, 

Renjith R