Completed
Last Updated: 15 Mar 2023 08:31 by ADMIN
Release 4.1.0 (15/03/2023)
Christian
Created on: 23 Jul 2021 14:40
Category: Form
Type: Bug Report
15
Changes in the form do not trigger model and dynamic form updates

Here is a TelerikForm with a FormItem (1) for a boolean field. Another FormItem (2) should render, depending on the boolean field (1). This does not work with a TelerikForm, but works with a standard EditForm.

The workaround for a TelerikForm is to use a FormItem Template with a TelerikCheckBox. This is demonstrated below as well.

<EditForm Model="@_data">
    <label>Condition 1 (InputCheckbox):</label>
    <InputCheckbox @bind-Value="@_data.Value1" />
    <br />
    @if (_data.Value1)
    {
        <label>Result 2</label>
        <InputCheckbox DisplayName="Result 2:" @bind-Value="@_data.Value2"></InputCheckbox>
    }
</EditForm>

<h1>TelerikForm</h1>

<TelerikForm Model="@_data">
    <FormItems>
        <FormItem LabelText="Condition 1 (FormItem):" Field="@nameof(_data.Value1)"></FormItem>
        <FormItem>
            <Template>
                <label for="x">Condition 1 (TelerikCheckBox):</label>
                <br />
                <TelerikCheckBox Id="x" @bind-Value="_data.Value1" />
            </Template>
        </FormItem>
        @if (_data.Value1)
        {
            <FormItem LabelText="Result 2:" Field="@nameof(_data.Value2)"></FormItem>
        }
    </FormItems>
</TelerikForm>

@code {
    private ExampleDto _data { get; set; } = new ExampleDto();

    public class ExampleDto
    {
        public string TextValue { get; set; }
        public bool Value1 { get; set; }
        public bool Value2 { get; set; }
    }
}

10 comments
ADMIN
Tsvetomir
Posted on: 15 Mar 2023 08:31

Hello,

The TelerikForm leverages a complex hierarchy of components, especially when autogenerated form editors are used. Hence, it does not exactly compare to the framework's EditForm (in the context of autogenerating items). 

We have exposed an OnUpdate event that is an EventCallback and mimics the EditForm's refreshes when editors are bound via @bind-* attribute.

Additionally, with the TelerikForm, you can decide when to rerender and when to suppress the rerender. Here is an example:

https://blazorrepl.telerik.com/GxYRFnkj49rxDSWI37

Alternatively, if custom editors are used and a rerender of the form is required, make use of the Refresh() method of the TelerikForm.

Regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Dimo
Posted on: 13 Jan 2023 06:55

@Christian - the issue was recently assigned to a developer in our short-term internal backlog and we conducted some research how to address it.

After we finish with the current tasks of higher priority, we may deal with this one too. However, the visible item status is the official marker to track for updates.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

christian
Posted on: 12 Jan 2023 15:57
Hello,
My team just came across this issue and would like to know if there any updates regarding this feature/bug request?
Thanks!
Daniel
Posted on: 28 Jun 2022 22:31

I don't see how this is a bug, If the CheckBox triggers the bind within the TelerikForm then only the TelerikForm would re-render. I would not expect this to bubble up within Blazor. However because you have explicitly set the bind within the context of this component then I would expect a re-render to be triggered.

 

This sort of situation would occur in multiple different situations regardless of Telerik or not. The fix would be to have ExampleDto implement INotifyPropertyChanged and then whatever component you want to be affected has to subscribe to that instance. I imagine doing a InvokeAsync(StateHasChanged) would be sufficient for all nested TelerikForms to re-render and update their controls.

 

Thanks,

Daniel

Indra
Posted on: 28 Jun 2022 17:33

Same problem with textbox. This is my REPL sample.

The textbox double binding with model is not working. When we update the form, the model's value is the same

 

https://blazorrepl.telerik.com/QQaqQClB30ja2HWQ12

ADMIN
Dimo
Posted on: 17 May 2022 10:39

Hi Lee,

A "Planned" status with no specific release number usually means "in the next few months".

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Lee
Posted on: 17 May 2022 10:28
Hi, just checking in to see the rough eta for this fix?
ADMIN
Dimo
Posted on: 25 Aug 2021 07:26

Hello Anders,

Thanks for sharing your point of view and I am sorry to find out that the workaround will cost you additional development time. I bumped the priority of this request in our backlog.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Anders
Posted on: 25 Aug 2021 07:19

I hope this bug will get a high priority.
We're using a lot of Telerikforms around our system and if we have to use the workaround. Would set us back a week at least.

Just glad it got found

 

Regards

Anders

ADMIN
Dimo
Posted on: 23 Jul 2021 15:00

Hi Christian,

Thanks for your cooperation in detecting this problem. The bug is now confirmed and awaits prioritization for fixing in a future product version.

In the meantime, I hope the workaround with the FormItem Template with a TelerikCheckBox is a feasible option.

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.