RadzenFormField different

[Paolo_Nichtpinkel]

I have this code, the RadzenFormFields are completely identical but appear differently in the frontend, why?

@inject IProjectHubClient Client
@inject NotificationService NotificationService

CreateProject

@code {
Variant variant = Variant.Outlined;

private IList<ViewTribeDto>? ViewTribeDtos { get; set; }
private IList<ViewProgrammingLanguageDto>? ViewProgrammingLanguageDtos { get; set; }
private CreateProjectDto? CreateProjectDto { get; set; }

private string? ProjectTitle { get; set; }
private string? ProjectDescription { get; set; }
private int ProjectTribe { get; set; }
private IList<int>? ProjectProgrammingLanguages { get; set; }
private string color = "rgb(42, 68, 135)";


protected override async Task OnInitializedAsync()
{
    this.CreateProjectDto = new CreateProjectDto
    {
        Languages = new List<int>()
    };

    ViewTribeDtos = await Client.ApiTribeGetAllTribesAsync();

    ViewProgrammingLanguageDtos = await Client.ApiProgrammingLanguagesGetAllLanguagesAsync();
}

private int SelectedTribeId { get; set; }

private void OnTribeSelected(int value)
{
    SelectedTribeId = value;
    if (CreateProjectDto != null)
    {
        CreateProjectDto.TribeId = value;
    }
}

private void OnClick()
{
    Client.ProjectInputPostAsync(CreateProjectDto);
}

//todo: clear after Submit

}

[SloSuenos]

I'm told it depends on whether the control has a value or not. Check and see if you are either setting them to a value programmatically or have your table's column setup with a default value in your database.

On the other hand, in your case it seems to have something to do with being nullable. Still trying to figure this all out myself.

Slosuenos

[Stefan_Nystrom]

I just noticed this issue for RadzenFormField containing a RadzenNumeric.
If my RadzenNumeric is bound to a nullable numeric type like decimal? then if the value is null and the field is not selected, the field looks different. If I select the field or if it has a non-null value, it turns normal.

I verified the behavior by changing the sample here Blazor FormField Component | Free UI Components by Radzen

[SloSuenos]

@Stefan_Nystrom, Atanas stated to me:

" Unfortunately this is an issue that RadzenNumeric inherits from Blazor and .NET - numeric types have a default value which is not an empty string. The problem is not specific only to Radzen itself:

- InputNumber (the Blazor built-in one): blazor - How to remove the default 0 value of <InputNumber/> - Stack Overflow

- Telerik numeric shows the same behavior if you edit this demo and change Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor. public int? AgeInYears { get; set; } to public int AgeInYears { get; set; }

- Mudblazor's numeric also behaves like that MudBlazor - Blazor Component Library

To the best of my knowledge the only workaround is changing the type of the component to nullable so its default value is no longer 0."

I know, major bummer...

SloSuenos

[korchev]

Just want to add that even if RadzenNumeric doesn't show 0 by default the model value would still be 0. It would be impossible to tell if the user entered 0 or didn't enter anything. I believe this is one of the reasons nullable value types exist.

[Stefan_Nystrom]

Thank you for your replies, but I must say I think there is some misunderstanding here.

I don't know if I was unclear before, but this

"To the best of my knowledge the only workaround is changing the type of the component to nullable so its default value is no longer 0."

is exactly what I did. I changed the bound type to be a nullable type "int?"

When I do that, the input field behaves exactly as expected, but the rendering of the label is strange and doesn't look like the other input fields.

I created my own component as a workaround

@using System.Collections.ObjectModel
@using Radzen
@using Radzen.Blazor
@inherits Radzen.Blazor.RadzenNumeric<decimal?>

@{
    base.BuildRenderTree(__builder);
}

@code
{
	protected override string GetComponentCssClass()
	{
		return base.GetComponentCssClass().Replace("rz-state-empty", string.Empty);
	}
}

Edit:
I experimented a little more and now I think I understand the confusion. I now suspect the issue I thought was a bug is a feature. The same rendering is done on regular text fields as well.

1. Un-selected text area with no value
   
   2.Selecting the text area
   
2. Un-selected text area with a value
   Looks like the selected one but I can't post more pictures in the post.

To me it is strange that the label jumps around, but it seems deliberate now that I dig a bit deeper.

[korchev]

@Stefan_Nystrom

To me it is strange that the label jumps around, but it seems deliberate now that I dig a bit deeper.

It was one of the reasons we developed RadzenFormField Anyway we decided to add a new property which will disable the floating behavior.

[yordanov]

The new property is available with 4.23.8:

AllowFloatingLabel="false"

Blazor FormField Component | Free UI Components by Radzen

[SloSuenos]

Hello @yordanov, I'm not sure why but implementing this does not change the behavior of any of my FormField components that display floating labels by default when I don't want them to. One example:

Mimicking your example:

When run, still floating:

Doesn't seem to have anything to do with the Variant type. What do you think?
SloSuenos

[korchev]

RadzenFormField displays a label by default. The new property does not change that. It stops the label from moving when the component is empty. The only purpose of RadzenFormField is to display a label above the input component. If you don't want a label you should not use RadzenFormField.

[SloSuenos]

I'm sorry, I just don't understand. All I'm trying to do is get the component labels to be fixed labels like your Floating Field demo.

SloSuenos

[korchev]

Are using a custom or premium theme? If yes you have to update it - change to another theme and then back.

[SloSuenos]

I'll try that, thanks. I added the new feature to your demo, looks nice!

SloSuenos

[SloSuenos]

No customizations. Changed my theme to Material from Material 3. Works perfect!!!

Changed the theme back to Material 3 - Doesn't work for any field like before.

Great news though, I'm sure you'll have this fixed very quickly.

SloSuenos

[korchev]

We have to release a new version of RBS with the premium themes. Will happen later this week.

[Thomas]

I got the same problem in Radzen Studio. i add an attribute to use new Property but nothing changes.
Will this "change Theme and then change it back" work for Radzen Studio also?
And will the new Property "AllowFloatingLabel" be integrated in RS?

kind regards

Thomas

[enchev]

@Thomas

And will the new Property "AllowFloatingLabel" be integrated in RS?

We will add the new property and we will publish update tomorrow.

[SloSuenos]

Folks, please remember to flush your browser's cache after installing this update.

SloSuenos