Control being rendered outside form item

[Diego]

I have a scenario where I needed to inherit the SfDataForm and also the FormGroup, FormItems and FormItem.

I needed them to be kind of agnostic, due to some compliance rules in my company.

Everything works as required, except when I need to use the template of the form field, in such case the control is rendered inside the form, but on the beginning of it.

I am attaching a sample project, so if anyone could help me I would be very grateful.

Attachment: SyncFusionFormExample_894bba79.rar

[Kokila Poovendran]

Hi Diego,

Thank you for reaching out to us.

We understand your concern about the rendering issue with SfDataForm and FormItems. Based on your scenario, we recommend adjusting your code snippet as follows to ensure proper rendering:

<NimbusDataForm2 Columns="6"

                 ColumnSpacing="10px"

                 Model="@Instance">

    <NimbusFormGroup2 LabelText="Seção 1">

        <NimbusFormItem2 For="@nameof(Order.Code)"

                         Label="Código"/>

        <NimbusFormItem2 For="Customer.Name"

                         Label="Nome">

            <Template>

                <SfTextBox @bind-Value="@Instance.Customer.Name"></SfTextBox>

            </Template>

        </NimbusFormItem2>

    </NimbusFormGroup2>

    <NimbusFormGroup2 LabelText="Seção 2">

        <NimbusFormItem2 For="@nameof(Order.Value)"

                         Label="Valor"/>

    </NimbusFormGroup2>

</NimbusDataForm2>

<FormItem LabelText="@Label"

          Field="@For"

          IsEnabled="@IsEnabled"

          ColumnSpan="@ColumnSpan">

    @if (Template is not null)

    {

        @Template.ChildContent

    }

    </FormItem>

@code {

[Parameter]

public RenderFragment ChildContent { get; set; }

[Parameter]

public string For { get; set; }

[Parameter]

public string Label { get; set; }

[Parameter]

public int ColumnSpan { get; set; }

[Parameter] public bool IsEnabled { get; set; } = true;

[Parameter]

public Template Template { get; set; }

}

Please integrate these adjustments into your project to resolve the issue you encountered. If you have any further questions or encounter any difficulties, feel free to reach out to us. We're here to help.

Attachment: SyncFusionFormExample_953b9cdd.zip