This is a migrated thread and some comments may be shown as answers.

Control column location of fields

1 Answer 474 Views
Form
This is a migrated thread and some comments may be shown as answers.
Marc Simkin
Top achievements
Rank 2
Iron
Iron
Veteran
Marc Simkin asked on 12 Mar 2021, 08:56 PM

If the form has more than one column, the fields are placed in columns based upon how they were laid out in the HTML. For example, field 1 is placed in column 1, field 2 in column 2, field 3 in column 1, etc.

Is there a way, without using a form group, to to control which column is used to render the field?  For example, fields 1 & 2 are placed in column 1, and field 3 is placed in column 2.

If that is not possible, then the FormGroup element should be changed so that when the LabelText is not provided, the legend html element is not rendered.

1 Answer, 1 is accepted

Sort by
0
Svetoslav Dimitrov
Telerik team
answered on 16 Mar 2021, 09:27 AM

Hello Marc,

The way to group different editors in a custom manner is indeed to use the FormGroups. If you do not wish to have the legend rendered you could use some CSS to hide it. Below, I have made an example that showcases a way to achieve the desired UI. In it, I have used the Class parameter to place a custom CSS class on the topmost wrapping element of the Form and cascade styles from it. You can extend that example to provide a conditional CSS class to the Class parameter (checks if the LabelText is null or empty).

<style>
    .my-telerik-form .k-form-legend {
        display: none;
    }
</style>

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@person" Columns="2" ColumnSpacing="25px" Class="my-telerik-form">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>
        <FormGroup LabelText="Personal Information" Columns="2" ColumnSpacing="15px">
            <FormItem LabelText="First Name" Field="@nameof(Person.FirstName)"></FormItem>
            <FormItem LabelText="Last Name" Field="@nameof(Person.LastName)"></FormItem>
            <FormItem LabelText="Age" Field="@nameof(Person.Age)" ColSpan="2"></FormItem>
            <FormItem LabelText="Email" Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
        </FormGroup>
        <FormGroup LabelText="Employee Information" ColumnSpacing="25px">
            <FormItem LabelText="Company Name" Field="@nameof(Person.CompanyName)"></FormItem>
            <FormItem LabelText="Position" Field="@nameof(Person.Position)"></FormItem>
        </FormGroup>
    </FormItems>
</TelerikForm>

@code {
    public Person person { get; set; } = new Person();

    public class Person
    {
        [Required(ErrorMessage = "The First name is required")]
        public string FirstName { get; set; }
        [Required(ErrorMessage = "The Last name is required")]
        public string LastName { get; set; }
        [Range(18, 120, ErrorMessage = "The age should be between 18 and 120")]
        public int Age { get; set; }
        [Required]
        [EmailAddress(ErrorMessage = "Enter a valid email")]
        public string Email { get; set; }
        [Required]
        public string CompanyName { get; set; }
        [MaxLength(25, ErrorMessage = "The position can be maximum 25 characters long")]
        public string Position { get; set; }
    }
}

 

Let me know if this solution works as expected for you and if you need any further assistance.

Regards,
Svetoslav Dimitrov
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.

Tags
Form
Asked by
Marc Simkin
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Svetoslav Dimitrov
Telerik team
Share this question
or