Unplanned
Last Updated: 22 Oct 2021 14:54 by ADMIN
billy
Created on: 22 Oct 2021 14:53
Category: Form
Type: Feature Request
4
Allow customization of the Form Buttons position

I would like to change the location of the Form Buttons. Instead of having them at the bottom of the form, I would like them to be at the top of the form. 

Please allow customizing of the Form Buttons position.

===========

ADMIN EDIT

===========

If you want to position the Form Buttons on top of the Form you can try the following approach - use FormItemTemplate and place the desired buttons in it. For example:

@using System.ComponentModel.DataAnnotations

<TelerikForm EditContext="@theEditContext" OnValidSubmit="@OnValidSubmitHandler" Width="200px">
    <FormItems>
        <FormItem>
            <Template>
                <TelerikButton ButtonType="@ButtonType.Submit" Primary="true">Submit</TelerikButton>
                <TelerikButton ButtonType="@ButtonType.Button" OnClick="@ClearButton">Clear</TelerikButton>
            </Template>
        </FormItem>
        <FormItem Field="FirstName"></FormItem>
        <FormItem Field="LastName"></FormItem>
        <FormItem Field="DOB"></FormItem>
    </FormItems>
    <FormButtons>
    </FormButtons>
</TelerikForm>

@code {
    private void ClearButton()
    {
        person = new Person();
        CreatedEditContext(person);
    }

    void CreatedEditContext(Person model)
    {
        theEditContext = new EditContext(model);

        theEditContext.AddDataAnnotationsValidation();
    }

    Person person { get; set; } = new Person();
    EditContext theEditContext { get; set; }

    protected override async Task OnInitializedAsync()
    {
        person = new Person();
        
        CreatedEditContext(person);
    }

    async Task OnValidSubmitHandler()
    {
        Console.WriteLine($"SAVING {person.FirstName} {person.LastName} who was born on {person.DOB}");
    }

    public class Person
    {
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string LastName { get; set; }
        public DateTime DOB { get; set; }
    }
}

0 comments