Column layout in DataForm component

12 Jan 20245 minutes to read

This segment provides guidance on dividing the form field editors inside the DataForm component into a column-based layout. The ColumnCount property allows us to specify the number of columns into which the DataForm should be divided.

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

<SfDataForm Width="50%"
            Model="@RegistrationDetailsModel" ColumnCount="2" ColumnSpacing="20px">

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

    <FormItems>
        <FormItem Field="@nameof(RegistrationDetailsModel.FirstName)" LabelText="First Name"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.LastName)" LabelText="Last Name"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.DOB)" LabelText="Date of birth" Placeholder="M/d/yyyy" EditorType="FormEditorType.DatePicker"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.PhoneNumber)" LabelText="Phone number"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.Sex)" LabelText="Gender"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.Email)" LabelText="Email" Placeholder="[email protected]"></FormItem>
    </FormItems>

</SfDataForm>


@code {
    public enum Gender
    {
        Male,
        Female,
        Others
    }

    public class RegistrationDetails
    {

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

        [Required(ErrorMessage = "Please enter your phone number")]
        [Phone(ErrorMessage ="Please enter valid phone number")]
        public string PhoneNumber { get; set; }

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

        [Required(ErrorMessage = "Please enter your date of birth")]
        public DateTime? DOB { get; set; }

        [Required(ErrorMessage = "Please choose your gender")]
        public Gender Sex { 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()
        {
            FirstName = "John",
            LastName = "Smith"
        };
}

Blazor DataForm Column Layout

Configure the column span

Additionally, by utilizing the ColumnSpan attribute of a FormItem, we can control the width of the editor, either allowing it to expand to full width or allocating it a portion of the width based on the provided column span.

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


<SfDataForm Width="50%"
            Model="@RegistrationDetailsModel" ColumnCount="6" ColumnSpacing="20px">

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

    <FormItems>
        <FormItem Field="@nameof(RegistrationDetailsModel.FirstName)" LabelText="First Name"  ColumnSpan="2"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.MiddleName)" LabelText="Middle Name" ColumnSpan="2"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.LastName)" LabelText="Last Name" ColumnSpan="2"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.DOB)" LabelText="Date of birth" Placeholder="M/d/yyyy" EditorType="FormEditorType.DatePicker" ColumnSpan="3"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.Sex)" LabelText="Gender" ColumnSpan="3"></FormItem>
        <FormItem Field="@nameof(RegistrationDetailsModel.Email)" LabelText="Gender" ColumnSpan="6" Placeholder="[email protected]"></FormItem>
    </FormItems>

</SfDataForm>

@code {

    public enum Gender
    {
        Male,
        Female,
        Others
    }

    public class RegistrationDetails
    {

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

        public string MiddleName { get; set; }

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

        [Required(ErrorMessage = "Please enter your date of birth")]
        public DateTime? DOB { get; set; }

        [Required(ErrorMessage = "Please choose your gender")]
        public Gender Sex { 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()
    {
        FirstName = "John",
        MiddleName = "Doe",
        LastName = "Smith"
    };

}

In the provided example, the layout of the DataForm is segmented into six equal columns, with the editor fields distributed accordingly, depending on the column span allocated to each one.

Blazor DataForm Column Layout

See Also