Questions on UI for Blazor Forum

1 answer

94 views

FormItem with custom template can be still solved generically

Hi,
I am reacting to the need for unbind two system solutions for Template RenderFragment of FomItem. If I use standard FormItem, I am getting everything solved - styles, messages, label, ... However just because I need TextArea instead of standard input, the very first thing I am loosing is for in label, because for unknown reason your components have given ID and it cannot be read for that for attribute of label. After losing that standard behaviour, I am also losing error propagating and validations. I am supposed to manually retrieve error messages with TelerikValidationMessage, however for some unknown reason you've enforced Expression for FieldIdentifier and hide the possibility to set FieldIdentifier manually. So I had to derive my custom component, hide your For parameter and set it to "() => default" so it would not trigger null check exception.

Now, why all this. Because I've successfully cloned original Model with all properties and attributes with custom Assembly. I am also able to omit or include ValidationAttribute attributes - thus enabling or disabling validations. And for those templates, I've made RenderFragment<EditModel<TValue>> extension of your Template (I hate Blazor for inability to extend parameters - I had to create a new one - BindTemplate), so I was also able to cover that original model with BindValue property, which has all attributes included and it is also properly notifying EditContext if wrapped value changed - to original FieldIdentifier. So now I can have BindTemplate with not only correct typed binding for any two way binding with property, but also GetValidationMessage ony my EditModel Context, so everything within that template without need to manually do that work. It is up to you, if you want to include my project or create some other form type for that. However, it would be nice, since My system is much more robust and provides binded way for message and its property to be used within the template:

<AnetFormItem EditModel="() => this.Is.Your.Previous.For.Attribute">
<BindTemplate Context="model">
<TelerikTextArea @bind-value="model.BindValue">
@model.GetValidationMessage()/* No For here, it is already binded within Context model */
</BindTemplate>
</AnetFormItem>

It seems more logical to me - to derive that BindValue directly form For expression instead making programmer to bind whatever and then figure out the correct MemberExpression for the message. You could also provide RenderFragment for lable on that model and much more - that is meaning of this post ... It is also only logical as this is similar for Grid cell template ...

Form

ValidationMessage

answered on 23 Dec 2024

1 answer

74 views

Conditional validation of elements in a TelerikRadioGroup template?

I have a RadioGroup that I am using a TemplateItem to display three radio buttons. When any of the radio buttons are selected another small set of form fields are enabled and if the radio button is deselected the same form fields are disabled.
This works well but I would like to add field validation to the mix by enabling field validation for the form fields when they are active and removing the validation when they are not active.
I've tried creating some custom attribute validators but am not sure how to pick up the action of selecting a radio button.
Any ideas on how to best accomplish this task?

i.e. In the picture below, I only wish to validate the Month/Date/Year if the "End by" radio is selected & only validate the numeric field if the "End after" radio is selected.

    <ItemTemplate Context="context2">
                    @{
                            var item = (ScheduleEndModel)context2;
                            if (item.Id == 1)
                            {
                                AppState.Schedule.IsEndNever = false;
                                <strong>
                                  End by:
                                </strong>
                                <TelerikDatePicker 
                                    @bind-Value="@AppState.Schedule.EndDate" 
                                    OnChange="@StateChangeTrigger"
                                    Min="@DateTime.Today"
                                    Max="@DateTime.MaxValue"
                                    Format="MM/dd/yyyy"
                                    DebounceDelay="@DebounceDelay"
                                    ShowWeekNumbers="true"
                                    Width="10vw" 
                                    Enabled="@EnableOnDate">
                                    <DatePickerFormatPlaceholder Day="Day" Month="Month" Year="Year" />
                                    </TelerikDatePicker>
                            }else
                            if (item.Id == 2)
                            {
                                AppState.Schedule.IsEndNever = false;
                                <strong id="endtype1">
                              End after:
                                </strong>
                                <TelerikNumericTextBox @bind-Value="@AppState.Schedule.EndAfterOccurrenceCount" OnChange="@StateChangeTrigger" Width="7vw" Enabled=@EnableAfterCount></TelerikNumericTextBox> <strong>occurrence(s)</strong>

                            }
                            else if (item.Id == 3)
                            {
                                AppState.Schedule.IsEndNever = true;
                                <strong>
                                No end
                                </strong>                            
                            }
                        }
                    </ItemTemplate>
                </TelerikRadioGroup>

RadioGroup

ValidationMessage

answered on 23 Jul 2024

0 answers

141 views

Is there a way to programmatically trigger form validation on a grid pop-up edit form?

I have a need to trigger the form validation process when certain actions are performed on the Grid popup add/edit form. What would be the best way to trigger the validation from code?

 private async Task GetNameHandler()
    {
            var companyName = await AgentServices.GetAgentCompName(editedAgent.AgentNumber);
            if (!string.IsNullOrEmpty(companyName))
            {
                editedAgent.Name = await myServices.GetCompanyName(editedAgent.AgentNumber);
            }
            else
            {
                editedAgent.Name = null;
//           Trigger form validation here
            }
    }

Submitting the form triggers the validation I want but I would like to make it trigger on a field OnBlur event that calls GetNameHandler()

Form

Grid

ValidationMessage

updated question on 25 Jun 2024

1 answer

382 views

Disable automatic Fluentvalidation in a form

Hi,

I have a TelerikForm containing a Fluent Validator and 2 buttons.
Only one of them has to validate the form.

However, even if I set NO code into the button's associated method, it does trigger the validation.

Seems to be a default behaviour.

How to disable it for my second button?

Thx in advance

A

Form

ValidationMessage

answered on 25 Dec 2023

1 answer

1.5K+ views

FluentValidation of a Complex Model not working after update to .net 7

Hi

After our update to .Net 7, FluentValidation does not work with complex models anymore.

We're using FluentValidation 11.5.1 (latest)

Blazored.FluentValidation 2.1.0 (latest)

I get the error message: Cannot validate instance of type "The Composed Class Type ". Can only validate Instance of Type "Parent Class".

Has somebody a solution for this issue?

It worked fine in the previous version.

Thank you.

Form

ValidationMessage

answered on 16 Mar 2023

1 answer

949 views

Access to Blazor components' source code

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

answered on 30 Dec 2022

1 answer

395 views

TelerikValidationMessage not showing for dynamic form using an EditContext

I have a question regarding the TelerikValidationMessage, which is showing in one form, but not in another. I am using data annotations on the properties of the User class.

public class User
{
    [Display(Name = "Voornaam*")]
    [Required(ErrorMessage = "Voornaam ontbreekt.")]
    [Placeholder(Description = "Voer de voornaam in.")]
    public string FirstName { get; set; }
...

The first form is a non-dynamic form with fields for every property in the User class. It is using a Model with bind-Value instead of an EditContext with Value and ValueChanged. When I press the Submit button, the validation summary is shows as are the validationmessages below the textinputs. This is the desired situation.

<TelerikForm Model="@TestUser"
                     OnValidSubmit="@HandleValidSubmit"
                     OnInvalidSubmit="@HandleInvalidSubmit">
            <FormValidation>
                <DataAnnotationsValidator></DataAnnotationsValidator>
            </FormValidation>
            <FormItems>
                
                <FormItem Field="@nameof(User.FirstName)">
                    <Template>
                        <div class="mb-3 row">
                            <label for="firstName" class="k-label k-form-label col-sm-2">Voornaam *</label>
                            <div class="col-sm-10">
                                <TelerikTextBox Id="firstName" @bind-Value="@TestUser.FirstName" InputMode="text" PlaceHolder="Voornaam"></TelerikTextBox>
                                <TelerikValidationMessage For="@(() => TestUser.FirstName)"></TelerikValidationMessage>
                            </div>
                        </div>
                    </Template>
                </FormItem>
...

Since I am trying to create a dynamic form which will work for all my classes, I have created a second form. This second form is a dynamic form using an EditContext.

<TelerikForm EditContext="@MyEditContext"
             OnValidSubmit="@HandleValidSubmit"
             OnInvalidSubmit="@HandleInvalidSubmit"
             ValidationMessageType="@FormValidationMessageType.Inline"
             >
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
        <ValidationSummary />
    </FormValidation>
    <FormItems>
        
        
        @foreach (var propertyInfo in DataContext.GetType().GetProperties())
        {
            <FormItem Field="@propertyInfo.Name">
                <Template>
                    <div class="mb-1 row">
                        <label for="@(propertyInfo.Name)" class="k-label k-form-label col-sm-2">@propertyInfo.DisplayName()</label>
                        <div class="col-sm-10">
                            <TelerikTextBox Id="@(propertyInfo.Name)"
                                            Value="@propertyInfo.GetValue(DataContext)?.ToString()"
                                            ValueExpression="@(() => propertyInfo.Name)"
                                            OnChange="OnChange"
                                            ValueChanged="@(value => OnValueChanged(value, propertyInfo.Name))"
                                            InputMode="text"
                                        PlaceHolder="@propertyInfo.PlaceholderDescription()">
                            </TelerikTextBox>
                            <TelerikValidationMessage For="@(() => propertyInfo.Name)"></TelerikValidationMessage>
                        </div>
                    </div>
                </Template>
            </FormItem>
        }
        
    </FormItems>
</TelerikForm>

And here's the imporant part of the code behind. This is proof of concept code and will be improved later.

protected void OnValueChanged(object e, string prop)
    {
        var propertyInfo = DataContext.GetType().GetProperty(prop);
        if (propertyInfo == null) return;

        if (propertyInfo.PropertyType == typeof(int))
        {
            var intValue = Convert.ToInt32(e);
            propertyInfo.SetValue(DataContext, intValue);
        }

        if (propertyInfo.PropertyType == typeof(string))
            propertyInfo.SetValue(DataContext, e.ToString());

        if (propertyInfo.PropertyType == typeof(DateTime) || propertyInfo.PropertyType == typeof(DateTime?))
            propertyInfo.SetValue(DataContext, DateTime.Now);

        if (propertyInfo.PropertyType == typeof(bool) || propertyInfo.PropertyType == typeof(bool))
            propertyInfo.SetValue(DataContext, true);
    }

    protected void OnChange(object e)
    {
        MyEditContext.Validate();
    }

When I press the submit button, the validationsummary is correctly shown, the labels color red and the border of the textinput colors red (after adding some css). So the validation seems to be working fine. However, the validationmessage below the textinput isn't showing. It isn't even in the DOM, so I assume it's not generated. I have searched the Interwebs and this forum/documentation, but I can't find the reason why the validationmessage isn't showing. Any help would be highly appreciated.

Btw; the second form shows the Inline messagetype, but that has no effect.

ValidationMessageType="@FormValidationMessageType.Inline"

ValidationMessage

updated answer on 01 Dec 2022

1 answer

101 views

TelerikForm with FluentValidation

Good Morning,

I vave this code. I try to create a FluentValdation in TelerikForm, code builts good. When i submit empty form, validations are good(), but the form doesn't show the errors.

<TelerikForm Model="@TriggerDetail" Columns="1" ColumnSpacing="25px" OnValidSubmit="@HandleValidSubmit" EditContext="@EditContext">
    <FormValidation>
        <FluentValidationValidator Validator="@Validator"></FluentValidationValidator>
    </FormValidation>    
    <FormItems>
        <FormGroup LabelText="General Information" Columns="2" ColumnSpacing="15px">
            <FormItem Field="@nameof(TriggerDetailModel.Name)" LabelText="@Localizer["JobTrigger_Name"]" Enabled="@Enabled"></FormItem>
            <ValidationMessage For="@(() => TriggerDetail.Name)" />
            <FormItem Field="@nameof(TriggerDetailModel.Group)" LabelText="@Localizer["JobTrigger_Group"]" Enabled="@Enabled">
                <Template>
                    <label class="k-label k-form-label">@Localizer["JobTrigger_Group"]</label>
                    <TelerikAutoComplete Data="@ExistingTriggerGroups" @bind-Value="@TriggerDetail.Group" ClearButton="true" Enabled="@Enabled" />
                </Template>
            </FormItem>
			<ValidationMessage For="@(() => TriggerDetail.Group)" />
		</FormGroup>
	</FormItems>
	<FormButtons>       
            <TelerikButton Icon="caret-alt-to-left" OnClick="@BackStep" ThemeColor="@(ThemeConstants.Button.ThemeColor.Error)">@Localizer["Back"]</TelerikButton>
            <TelerikButton ButtonType="ButtonType.Submit" Icon="caret-alt-to-right" ThemeColor="@(ThemeConstants.Button.ThemeColor.Info)">@Localizer["Next"]</TelerikButton>        
    </FormButtons>
</TelerikForm>
	
	
@code{
	public TriggerDetailModel TriggerDetail { get; set; } = null!;
	public TriggerDetailValidator Validator { get; set; } = new();
	
    private void HandleValidSubmit()
    {
        var validationResult = Validator.Validate(TriggerDetail);
        if (validationResult.IsValid)
        {
            NextStep();
        }
        else
        {
            //Errores
        }            
    }
}

public class TriggerDetailValidator : AbstractValidator<TriggerDetailModel>
{                
        public TriggerDetailValidator()
        {           
            RuleFor(t => t.Name).NotEmpty();
            RuleFor(t => t.Group).NotEmpty();
        }
}

Where is the problem?

Thanks

Form

ValidationMessage

answered on 18 Nov 2022

1 answer

121 views

Display TelerikTooltip without Hover or Click

Hi,

I would like to use a TelerikTooltip as validation message container, so that the user can click to close the tooltip after reading the message.

Can the TelerikTooltip be made to display immediately and then respond to clicks as normal afterwards?

Form

Tooltip

ValidationMessage

answered on 30 May 2022

1 answer

846 views

How to set dynamic validations for Form fields ?

I am working on flow, where based on users selection in dropdown, I want to update the validations of TextBox field.
Is there any way to do that ?
Becz at start we are creating model and specifying all specific validations, but now how we can apply validations based on users selection.

answered on 06 Apr 2022