Issue with TelerikForm and inline HTML code

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Duplicated

Last Updated: 31 Jul 2023 08:56 by ADMIN

Ivaylo

Created on: 24 Jul 2023 16:05

Category: UI for Blazor

Type: Bug Report

Issue with TelerikForm and inline HTML code

Hello there,

I encountered an issue with the TelerikForm component after upgrading Telerik.UI.for.Blazor from version 4.0.1 to 4.4.0. In the code below I have placed the two form items in a Bootstrap grid:

<TelerikForm Model="@person">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>
        <div class="row">
            <div class="col-md-6">
                <FormItem Field="@nameof(Person.Id)" LabelText="Id"></FormItem>
            </div>
            <div class="col-md-6">
                <FormItem Field="@nameof(Person.FirstName)"
                        EditorType="@FormEditorType.TextArea"
                        LabelText="First name">
                </FormItem>
            </div>
        </div>
    </FormItems>
</TelerikForm>

With version 4.0.1, the two fields were displayed in two columns within the form element. However, with version 4.4.0, I noticed that the HTML code, specifically the div elements, are now rendered outside of the form element. The HTML structure looks like this:

<div class="row">
	<div class="col-md-6">
	</div>
	<div class="col-md-6">
	</div>
</div>
<form class="k-form telerik-blazor k-form-md" dir="ltr" style="">
	<div class="k-form-field">
		<label class="k-label k-form-label" for="a6cc8103-4d52-4377-8656-169e4a3de33a">
            Id
		</label>
		<div class="k-form-field-wrap">
......

I wanted to check with you if this change is intentional or if it might be a bug with the TelerikForm component in the latest version.

Best regards,

Ivaylo

Duplicated

This item is a duplicate of an already existing item. You can find the original item here:

Form reorders items and custom markup

1 comment

ADMIN

Yanislav

Posted on: 31 Jul 2023 08:56

Hello Ivaylo,

Indeed, including additional HTML inside the FormItems tag worked in previous product versions, although it was an unintended feature rather than an officially supported behavior. In version 4.1.0, we introduced a new feature that allowed the combination of auto-generated and declared Form items. This enhancement required making changes to the Form component. As a result, the presence of custom elements within the FormItems tag led to a reordering of form elements.

More information you can find in the following article from the documentation: https://docs.telerik.com/blazor-ui/components/form/formitems/formitemstemplate#form-template-for-all-items
This resource includes historical notes, a description of the new template feature that enables you to include arbitrary content inside the form, and a migration guide.

If you require any further information, please feel free to reach out to us.

Regards,
Yanislav
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!