Pending Review
Last Updated: 02 Dec 2024 19:21 by NovaStor

Hi.

When adding a form item to a form, and that form item is disabled, I still expected the validation tooltip to be displayed.

For example, the form item may be dynamically disabled because of previous missing criteria.

I've attached a sample project to reproduce the behavior in a simple scenario.

If the form items are enabled, then the tooltips appear as expected.

Until this issue is resolved, is there a simple work-around?

Thank you.

Completed
Last Updated: 14 Nov 2024 09:27 by ADMIN
Release 7.0.0

My Nullable DateOnly field shows as 1/1/2001 - I would expect it to be a more sensible default. The problem applies to all autogenerated DatePickers (like the Grid's filter DatePicker and the Form). The same issue is applicable to the TimeOnly struct.

 

===ADMIN EDIT===

In the interim, as a viable workaround, you can utilize the FormItem Template and declare a TelerikDatePicker like this:

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@PersonModel">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>
        <FormItem>
            <Template>
                <label for="country">Date of Birth:</label>
                <TelerikDatePicker @bind-Value="@PersonModel.DOB" Width="200px" />
            </Template>
        </FormItem>
    </FormItems>
</TelerikForm>

@code {
    private Person PersonModel { get; set; } = new Person() { DOB = null };

    public class Person
    {
        [Display(Name = "Date of Birth")]
        public DateOnly? DOB { get; set; }
    }
}

 

Completed
Last Updated: 09 Oct 2024 11:21 by ADMIN
Created by: Stewart
Comments: 4
Category: Form
Type: Bug Report
1

Hi, 

I came across some unusual behaviour

I wanted to hide the default form submit button so I could put it elsewhere on the page but once I had an empty FormButton element on the page I was unable to print any more

<FormButtons></FormButtons>

a solution to my problem was to put an empty span in the element

<FormButtons><span></span></FormButtons>

Unplanned
Last Updated: 07 Oct 2024 05:45 by ADMIN
Created by: Dale
Comments: 5
Category: Form
Type: Feature Request
12

Recently a readonly attribute has been added to a number of input fields. This was a great addition. Thank you!

Would it be possible to add this attribute to Telerik Form?

Example:

<FormItem Enabled="false" ReadOnly="true"/>

Completed
Last Updated: 25 Sep 2024 11:05 by ADMIN
Created by: Bernd
Comments: 4
Category: Form
Type: Feature Request
0

I often have the scenario where I need to switch from the autogenerated formitem to a templated version. Mostly because I need a different editor

For example:

<FormItem Field="@nameof(KeyValuesViewModel.Workplace)" LabelText="Workplace" EditorType="@FormEditorType.TextBox"/>

I create something like this:

            <FormItem>
                <Template>
                    <label for="WorkplaceInput">Workplace</label>
                    <TelerikMaskedTextBox Id="WorkplaceInput" Mask="aa aaaaaa" Enabled=@WorkplaceEnabled OnChange="OnWorkplaceChanged" @ref=@WorkplaceTextBoxRef />
                    <TelerikValidationMessage For="@(() => KeyValuesViewModel.Workplace)" />
                </Template>
            </FormItem>

It would speed up things if I just could use the "light bulb" and convert it. Instead coding it manually, copy, paste, edit the copied version. Over and over again.

Unplanned
Last Updated: 31 Jul 2024 23:50 by Leland

Currently, you can split the TelerikForm into multiple columns via the Columns parameter. These columns will have equal widths. I would like to have the ability to define custom width per column. 

<AdminEdit>

You can use the following code snippet as a workaround with some considerations:

  • The k-grid-cols-2 class is a dynamic one. The "2" segment maps to the number of the columns defined via the Columns parameter exposed for the <TelerikForm>
  • If there are more/less than two columns, you should change the values for the grid-template-columns accordingly.

<style>
    .non-equal-columns .k-form-layout.k-grid-cols-2 {
        grid-template-columns: 71% 28.5%;
    }
</style>

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@person" ColumnSpacing="25px" Columns="2" Class="non-equal-columns">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>
        <FormGroup LabelText="Personal Information" 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)"></FormItem>
            <FormItem LabelText="Email" Field="@nameof(Person.Email)"></FormItem>
        </FormGroup>
        <FormGroup LabelText="Employee Information" Columns="2" ColumnSpacing="15px">
            <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; }
    }
}

</AdminEdit>

Unplanned
Last Updated: 17 Jun 2024 10:58 by Daniel
Created by: Daniel
Comments: 0
Category: Form
Type: Feature Request
2

Currently, the input components in Telerik UI for Blazor use JavaScript to set the value, instead of the value parameter. This is done so that features like Placeholder, Format, and others are available. 

This comes at the cost of delayed rendering of the preset value of the input components. 

Unplanned
Last Updated: 22 May 2024 19:47 by Wendy
Created by: Stewart
Comments: 7
Category: Form
Type: Feature Request
11
I was surprised to find that FormGroup doesn't have a ColSpan
Unplanned
Last Updated: 09 May 2024 08:14 by Mike

There is no AriaDescribedBy parameter on the Upload when it's inside a Form. I'd like to be able to associate some elements to further describe some validation messages/hints, but there is no parameter exposing that.

For reference, the Angular FormField component associates the underlying control and its visible messages by assigning the aria-describedby attribute to the focusable element.

Completed
Last Updated: 18 Apr 2024 11:41 by ADMIN
Release 2024 Q2 (May)
Created by: Mike
Comments: 1
Category: Form
Type: Bug Report
0

When I assign an Id to a FormGroup in TelerikForm, it's value can be seen in code, but neither the attribute nor it's value get rendered.

 

<TelerikForm Model="@TestUser"
                     OnValidSubmit="@HandleValidSubmit"
                     OnInvalidSubmit="@HandleInvalidSubmit">
            <FormValidation>
                <DataAnnotationsValidator></DataAnnotationsValidator>
            </FormValidation>
            <FormItems>
                <FormGroup LabelText="User Information" Id="userinfo">
                    <FormItem Field="@nameof(User.FirstName)"></FormItem>
                    <FormItem Field="@nameof(User.LastName)"></FormItem>
                    <FormItem Field="@nameof(User.Email)">
                        <Template>
                            <label for="mail" class="k-label k-form-label">Email*:</label>
                            <TelerikTextBox Id="mail" @bind-Value="@TestUser.Email" InputMode="email" Placeholder="example@domain.com"></TelerikTextBox>
                            <TelerikValidationMessage For="@(() => TestUser.Email)"></TelerikValidationMessage>
                        </Template>
                    </FormItem>
                    <FormItem Field="@nameof(User.Password)">
                        <Template>
                            <label for="pass" class="k-label k-form-label">Password*:</label>
                            <TelerikTextBox Id="pass" @bind-Value="@TestUser.Password" Password="true"></TelerikTextBox>
                            <TelerikValidationMessage For="@(() => TestUser.Password)"></TelerikValidationMessage>
                        </Template>
                    </FormItem>
                    <FormItem Field="@nameof(User.BirthDate)" />
                    <FormItem Field="@nameof(User.AcceptTerms)" />
                </FormGroup>
                <FormGroup LabelText="Shipping Address" Id="shipaddress">
                    <FormItem LabelText="Country*: " Field="@nameof(User.Country)" />
                    <FormItem LabelText="City*: " Field="@nameof(User.City)" />
                    <FormItem LabelText="Address Line*: " Field="@nameof(User.AddressLine)" />
                    <FormItem LabelText="Second Address Line: " Field="@nameof(User.AddressLine2)" />
                </FormGroup>
            </FormItems>
        </TelerikForm>
Completed
Last Updated: 04 Apr 2024 15:40 by Chris
Release 4.2.0 (04/26/2023)
Created by: Stewart
Comments: 16
Category: Form
Type: Bug Report
19

When I updated to the latest version I noticed that the FormItems in AuthorizedViews were moved to the bottom of the form, Quick example:

<TelerikForm>
    <FormItems>
        <AuthorizeView>
            <Authorized>
                <FormItem Field="First"/>
            </Authorized>
        </AuthorizeView>
        <FormItem Field="Second"/>
    </FormItems>
</TelerikForm>

will end up like

<TelerikForm>
    <FormItems>
        <FormItem Field="Second"/>
        <FormItem Field="First"/>
    </FormItems>
</TelerikForm>

Unplanned
Last Updated: 17 Oct 2023 11:07 by Julia
We are looking for the "aria-required" attribute to the TelerikTextBox. This is needed because of "WCAG" for a screen reader to notify the users of our application that input is required.
Unplanned
Last Updated: 08 Sep 2023 14:42 by ADMIN
Created by: ZwapSharp
Comments: 2
Category: Form
Type: Feature Request
11
Please implement automatic usage of Data Annotations DisplayFormat attribute for the auto generated form items.
Completed
Last Updated: 06 Jun 2023 13:29 by ADMIN
Created by: Peter
Comments: 1
Category: Form
Type: Bug Report
0

https://docs.telerik.com/blazor-ui/components/form/formitems/formitemstemplate

Render defined Form items inside a FormItemsTemplate  Example

Line 22 has @nameof(Person.Id) which generates an error, should be without the @ as shown below.


 <TelerikFormItemRenderer Item="@( formItems.First(x => x.Field == nameof(Person.Id)) )" />


 

Declined
Last Updated: 31 May 2023 07:43 by ADMIN
Created by: Stewart
Comments: 1
Category: Form
Type: Feature Request
0

Hi, 

It would be nice to have an OnUpdateDebounce for TelerikForm's OnUpdate.

I am currently using a form to filter information with an API call that is shown in a grid.

It would be nice to reduce the number of calls and with larger data we sometime get an earlier query returned after a later one resulting in showing the results for a search of 'T' instead of 'Tom' 

Duplicated
Last Updated: 24 Mar 2023 13:46 by ADMIN

I have a rather large TelerikForm that contains multiple TelerikTabStrip controls that contain FormItems. In the new version 4.1.0  the form items in the tabstrip do not display correctly and the form items not in the tabs are moved to the bottom of the page. The markup in a test project i created shows the tabstrip above and outside the form tag. Works correctly in 4.0.1. I've attached the test razor file.

Completed
Last Updated: 15 Mar 2023 08:31 by ADMIN
Release 4.1.0 (15/03/2023)

Here is a TelerikForm with a FormItem (1) for a boolean field. Another FormItem (2) should render, depending on the boolean field (1). This does not work with a TelerikForm, but works with a standard EditForm.

The workaround for a TelerikForm is to use a FormItem Template with a TelerikCheckBox. This is demonstrated below as well.

<EditForm Model="@_data">
    <label>Condition 1 (InputCheckbox):</label>
    <InputCheckbox @bind-Value="@_data.Value1" />
    <br />
    @if (_data.Value1)
    {
        <label>Result 2</label>
        <InputCheckbox DisplayName="Result 2:" @bind-Value="@_data.Value2"></InputCheckbox>
    }
</EditForm>

<h1>TelerikForm</h1>

<TelerikForm Model="@_data">
    <FormItems>
        <FormItem LabelText="Condition 1 (FormItem):" Field="@nameof(_data.Value1)"></FormItem>
        <FormItem>
            <Template>
                <label for="x">Condition 1 (TelerikCheckBox):</label>
                <br />
                <TelerikCheckBox Id="x" @bind-Value="_data.Value1" />
            </Template>
        </FormItem>
        @if (_data.Value1)
        {
            <FormItem LabelText="Result 2:" Field="@nameof(_data.Value2)"></FormItem>
        }
    </FormItems>
</TelerikForm>

@code {
    private ExampleDto _data { get; set; } = new ExampleDto();

    public class ExampleDto
    {
        public string TextValue { get; set; }
        public bool Value1 { get; set; }
        public bool Value2 { get; set; }
    }
}

Duplicated
Last Updated: 14 Mar 2023 17:52 by ADMIN

I would like to use manually declared and autogenerated fields together.

I believe this currently exists for the Grid

Completed
Last Updated: 09 Mar 2023 14:25 by ADMIN
Release 4.1.0 (15/03/2023)
I would like to use manually declared and autogenerated fields together as in the Grid with the autogenerated columns.
Unplanned
Last Updated: 08 Mar 2023 08:15 by Jimmy

Currently, when the AutoGenerated form items are used, the data attributes such as Password and Email are ignored. Model sample:

    public class LoginModel
    {
        [Required, EmailAddress, Display(Name = "Email Address")]
        public string EmailAddress { get; set; }

        [Required, Phone, Display(Name = "Phone Number")]
        public string PhoneNumber { get; set; }
    }

1 2