Component inside a Grid Column Template re-rendering

[Eduardo]

Greetings, Syncfusion team!

I've created a Component with a conditional rendering.

When I press the pink button, If it's object contains items, it should render a list(red), if it doesn't, it should render a input field(blue).

The problem is that every time I click in a row, a button or anywhere, the component renders again.

Before clicking outside the input

After clicking outside the input, it became empty again. But only the input inside my Component

It only happens when the input's @bind-value variable is inside the Template context

I think I can prevent this using PreventRender or ShouldRender, but it would only work for specific events.

Is there anything I can do to avoid the Component to render again?

I'm sending a video and the code of the Component and it's Parent for further informations

Attachment: Component_Rerendering_a157ae66.zip

[Naveen Palanivel]

Hi Consensu,

Sorry for the Inconvenience.

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

Regards,

Naveen Palanivel.

[Naveen Palanivel]

Hi Consensu,

Sorry for the Inconvenience.

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

Regards,

Naveen Palanivel.

[Naveen Palanivel]

Hi Consensu,

Thanks for contacting Syncfusion support

We had checked this scenario by creating a sample  .But we are not able to reproduce the reported error at our end and your attached video is not clear. We are attaching the sample and video in this ticket.

Kindly download and refer the sample in this ticket. If you are still facing the reported issue, then the following details would be helpful for us to proceed further.

1. Share the video demonstration of the issue you are facing.
2. If possible, reproduce the reported issue in the provided sample
3. Or share issue reproducible runnable  sample

Above request details will be very helpful for us to further validate the reported query at our end and provide solution as easy as possible.

Regards,

Naveen Palanivel

Attachment: DataGrid_cbecb6f7.zip

[Eduardo]

Hello again!

Thank you very much for your attention. I created a project that replicates my original project, I also recorded two videos showing the components behaviour.

There are two situations:

1 - The child component is rendering multiple times (everytime I click). This may not be a problem since the field values don't disappear

2 - The SfNumericTextBox binded with an object inside the Grid <Template> loses it value when I click outside it.

Attachment: GridSampleTest_95c3dcec.zip

[Eduardo]

The videos I  mentioned

Attachment: Videos_d1f600a0.zip

[Naveen Palanivel]

Hi Consensu,

Sorry for the Inconvenience.

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

Regards,

Naveen Palanivel.

[Eduardo]

I'm sorry for the last two videos, they don't show the component working.

Here's the right one

Attachment: This_is_the_correct_video_9fb5b82b.zip

[Naveen Palanivel]

Hi Consensu,

Sorry for the Inconvenience.

We are currently checking the reported query at our end and we will update the further details within one business days(June 29, 2022). Until then we appreciate your patience.

Regards,

Naveen Palanivel.

[Vignesh Natarajan]

Hi Consensu,

Sorry for the delay in getting back to you.

Query: “ The SfNumericTextBox binded with an object inside the Grid <Template> loses it value when I click outside it.”

We are able to reproduce the reported behavior at our end also. This is because GridColumn Template will be refreshed during a certain to refresh the content based on the external action. This is the default behavior of the Grid Column. For example, consider the requirement of displaying a custom component on button click or value change event of the NumericText component. At that time, Template content has to be refreshed.

On refreshing, the Template is initialized with a default value, and orderitem property used inside the Template context is refreshed with an updated value. To overcome this behavior, we request you perform the following action in the Razor page's code section instead of inside the razor code.

Refer to the below-modified code example.

<SfGrid @ref="GridProducts" TValue=Product AllowPaging="true" Height="100%" DataSource="ProductList">

    <GridPageSettings PageSize="15" PageCount="10"></GridPageSettings>

    <GridColumns>

        <GridColumn>

            <Template>

                @{

                    var product = (context as Product);

                }

                <div class="row">

                    <div class="col-5">

                        <div>

                            <p>@product.Id</p>

                            <p class="mt-2 fs-5" style="overflow: hidden; text-overflow: ellipsis;">@product.Name</p>

                        </div>

                    </div>

                    <div class="col-6 mt-1">

                        <div>

                            <SfButton CssClass="botaoRosa" @onclick="() => buscaCorTamanho(product)" type="button">Selecionar</SfButton>

                            <div class="row">

                                <div class="col-5">

                                    <ChildComponent SizeColorList="product.ProductSizeColors" @ref="sizecolorpicker" SizeColorAmount="IdAmountColorSize">

                                        <TemplateNull>

                                            <h5> </h5>

                                        </TemplateNull>

                                        <TemplateEmpty>

                                            <div class="row mt-4">

                                                <div class="col-6">

                                                    <span class="rubikRegular">Quantidade</span><br />

                                                    <SfNumericTextBox CssClass="campoQuant" TValue="decimal?" ShowSpinButton="true"

                                                                      @bind-Value="@orderitem.Amount"

                                                                      @onchange="() => escolheProdutos(orderitem.Amount, orderitem)" />@*This input will not work*@

 

                                                    <SfNumericTextBox CssClass="campoQuant" TValue="decimal?" ShowSpinButton="true"

                                                                      @bind-Value="@bindValueNumericInput"

                                                                      @onchange="() => escolheProdutos(orderitem.Amount, orderitem)" /> @*This input will work*@

                                                </div>

                                            </div>

                                        </TemplateEmpty>

                                    </ChildComponent>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    public Dictionary<string, string> IdAmountColorSize { get; set; } = new Dictionary<string, string>();

    SfGrid<Product> GridProducts { get; set; }

    ChildComponent sizecolorpicker;

    public OrderItem orderitem = new OrderItem();

    public decimal? bindValueNumericInput = 0;

    public void buscaCorTamanho(Product product)

    {

        orderitem = new OrderItem

            {

                Id = product.Id,

                Measurement = product.Measurement,

                ProductSizeColorId = 2,

                Amount = null // this is the property binded with the SfNumericTextBox, if you bind the field with a variable out of this context (<Template>)

            };

        if (product.Id != 2)

        {

. . . .

        }

        else

        {

            product.ProductSizeColors = new List<ProductSizeColor> { };

        }

        StateHasChanged();

    }

Please find the modified sample in the attachment. Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Attachment: GridSampleTest_3632ba76.zip

[Eduardo]

Yes, I came to this same conclusion and it works for me. 

It's better bind the field with an object outside the Template context.

Thank you very much for your attention!

[Naveen Palanivel]

Hi Consensu,

Welcome

we suspect that the reported issue has been resolved

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.