Unplanned
Last Updated: 11 Dec 2021 09:46 by ADMIN
billy
Created on: 22 Oct 2021 14:53
Category: Form
Type: Feature Request
10
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; }
    }
}

2 comments
ADMIN
Marin Bratanov
Posted on: 11 Dec 2021 09:46

Hello James,

This particular enhancement is to allow placing the buttons in a different place than the default bottom inside our own form (maybe something like ButtonsPosition.Top|Bottom or something like that, I don't know exactly yet). The idea is that it should be an easy customization for a basic case.

If you want the submit button to be outside of the form, indeed - that other feature will be necessary. If we start requiring all those settings just to move the buttons to the top, it will make it quite hard to use.

I have ensured your Vote is added to both items which raises their popularity, and that is a metric our management uses when prioritizing tasks. You can know when there is new information on them if you click the Follow buttons on their respective pages.

Regards,
Marin Bratanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
James
Posted on: 10 Dec 2021 21:48

I don't think this will work if the button is outside the form. If you could add an Id attribute on the form tag and then allow a form attribute on the submit button. Then you would not need this work around: https://feedback.telerik.com/blazor/1470474-form-parameter-for-the-button