Layout customization

13 Mar 20249 minutes to read

This segment provides a concise overview of how to position buttons and labels correctly within the DataForm component. It also covers how to customize the button elements and the various ways to present validation messages.

Button alignment

The DataForm component provides the capability to position the button horizontally within the form container as needed, utilizing the ButtonsAlignment property .The ButtonsAlignment is categorized into three types, as outlined below,

FormButtonsAlignment Snapshot
FormButtonsAlignment.Center DataForm FormButtonsAlignment.Center
FormButtonsAlignment.Left DataForm FormButtonsAlignment.Left
FormButtonsAlignment.Right DataForm FormButtonsAlignment.Right
FormButtonsAlignment.Stretch DataForm FormButtonsAlignment.Stretch

The below example portrays how to use the ButtonsAlignment property in DataForm component

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Model="@RegistrationDetailsModel"
            ButtonsAlignment="FormButtonsAlignment.Center">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

Add additional buttons and customization

It is possible to incorporate custom buttons along with other elements ,if necessary by using the FormButtons RenderFragment within the DataForm component.

In the provided code snippet, an extra button component is implemented to reset the input fields when pressed, by utilizing its OnClick event handler of SfButton.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations
@using Syncfusion.Blazor.Buttons


<SfDataForm EditContext="@RegistrationEditContext">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

    <FormButtons>
        <SfButton type="submit" CssClass="e-success">Register</SfButton>
        <SfButton type="button" CssClass="e-warning" OnClick="ClickHandler">Clear</SfButton>
    </FormButtons>

</SfDataForm>

<style>
    .e-data-form .e-btn.e-success {
        margin-right: 5px; 
    }
</style>

@code {
    public EditContext RegistrationEditContext { get; set; }

    protected override void OnInitialized()
    {
        RegistrationEditContext = new EditContext(RegistrationDetailsModel);
        base.OnInitialized();
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();

    public void ClickHandler()
    {
        RegistrationDetailsModel = new RegistrationDetails();
        RegistrationEditContext = new EditContext(RegistrationDetailsModel);
    }
}

DataForm Button Customization

Label position

DataForm component allows you to align the label either to the top or left to the field editors , We can implement this feature by assigning values to LabelPosition , Classification of the respective property is outlined below ,

LabelPosition Snapshot
FormLabelPosition.Top DataForm FormLabelPosition.Top
FormLabelPosition.Left DataForm FormLabelPosition.Left
When no specific value is provided, the layout defaults to FormLabelPosition.Top. For boolean editors like SfCheckBox and SfSwitch, labels will be positioned to the right. DataForm FormLabelPosition.Left

The below code part explains how to configure the LabelPosition in DataForm component.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Model="@RegistrationDetailsModel"
            LabelPosition="FormLabelPosition.Left">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }

        [Required(ErrorMessage = "You need to agree to the Terms and Conditions")]
        [Range(typeof(bool), "true", "true", ErrorMessage = "You need to agree to the Terms and Conditions")]
        [Display(Name="Agree to the terms")]
        public bool Accept { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

Floating label

The DataForm component allows you to float the label to the top of the input field when the input field is focused, by using the EnableFloatingLabel property.The below code example and gif demonstration illustrates how to use the EnableFloatingLabel property in DataForm component.

@using Syncfusion.Blazor.DataForm;
@using System.ComponentModel.DataAnnotations

<SfDataForm ID="MyForm1"  Model="@EventRegistrationModel"  EnableFloatingLabel="true" Width="50%">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
   
</SfDataForm>

@code {

    private EventRegistration EventRegistrationModel = new EventRegistration()
        {
            FirstName = "Andrew",
            LastName = "Jack"
        };
}
public class EventRegistration
{
    [Required(ErrorMessage = "Please enter your name.")]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
    [Required(ErrorMessage = "Please enter your last name.")]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }
    [Required(ErrorMessage = "Please enter your email address.")]
    [EmailAddress(ErrorMessage = "Please enter a valid email address.")]
    [Display(Name = "Email ID")]
    public string Email { get; set; }
    [Required(ErrorMessage = "Please enter your phone number.")]
    [Display(Name = "Phone Number")]
    [RegularExpression(@"^\d{10}$", ErrorMessage = "Please enter a valid 10-digit phone number.")]
    public string PhoneNumber { get; set; }
}

Blazor DataForm Floating Label

NOTE

The floating label feature is only applicable when the LabelPosition is set to FormLabelPosition.Top.

Change the form width

The DataForm component allows you to customize the width of the form container by using the Width property.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Width="50%"
            Model="@RegistrationDetailsModel">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }

        [Required(ErrorMessage = "You need to agree to the Terms and Conditions")]
        [Range(typeof(bool), "true", "true", ErrorMessage = "You need to agree to the Terms and Conditions")]
        [Display(Name = "Agree to the terms")]
        public bool Accept { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

Blazor DataForm Form Width