Problem with formfields

Radzen Studio Blazor Server
1

Hello radzen team,
i have a problem with formfields.

I have defined a page "add werkstatttermin" with some dropdowns. e.g. Dropdown Werkstattpartner.
this is the page before error:

@page "/add-werkstatt-termin"
@layout MainLayout
@inherits Trent.Pages.AddWerkstattTerminComponent

@using Radzen
@using Radzen.Blazor
@using Trent.Models.Trentdb
@using Microsoft.AspNetCore.Identity;
@using Trent.Models
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject Microsoft.Extensions.Localization.IStringLocalizer<AddWerkstattTermin> L
<PageTitle>Add Werkstatt Termin</PageTitle>
<RadzenContent Container="main">
  <ChildContent>
    <RadzenHeading Size="H3" Text="Werkstatttermin">
    </RadzenHeading>
    <div style="margin-bottom: 0.5rem" class="row">
      <div class="col-md-3">
        <RadzenFormField style="width: 100%" Text="Fahrzeug" Variant="Variant.Text">
          <ChildContent>
            <RadzenDropDown Data="@FahrzeugeDropDownResult" style="width: 100%" TextProperty="KennzeichenBetriebsstaette" @bind-Value="@(Werkstatttermin.FahrzeugId)" ValueProperty="FahrzeugId" Name="Dropdown2">
            </RadzenDropDown>
          </ChildContent>
        </RadzenFormField>
      </div>
      <div class="col-md-1">
        <RadzenLabel Component="mitHaenger" style="display: block; float: none; font-size: 12px; line-height: 15px" Text="mit Hänger">
        </RadzenLabel>
        <RadzenCheckBox style=@($"display: block; float: none;max-height:20px;max-width:20px;margin-top:10px") TriState="false" @bind-Value="@MitHaenger" Name="MitHaenger">
        </RadzenCheckBox>
      </div>
      <div class="col-md-3">
        <RadzenFormField style="width: 100%" Text="Hänger" Variant="Variant.Text" Visible="@MitHaenger">
          <ChildContent>
            <RadzenDropDown Data="@HaengerDropDownResult" style="width: 100%" TextProperty="KennzeichenBetriebsstaette" @bind-Value="@(Werkstatttermin.FahrzeugHaengerId)" ValueProperty="FahrzeugId" Name="Dropdown2">
            </RadzenDropDown>
          </ChildContent>
        </RadzenFormField>
      </div>
    </div>
    <div class="row" style="margin-bottom: 0.5rem">
      <div class="col-md-4">
        <RadzenDataGrid @ref="datagrid0" AllowAlternatingRows="true" AllowPaging="true" AllowPickAllColumns="false" Data="@WerstattterminGruendeFahrzeugDataGrid" Density="Density.Compact" EmptyText="Keine Daten" TItem="Trent.ViewModels.WerkstattterminGrundView" PageNumbersCount="2" PageSize="5" ShowExpandColumn="false" >
          <Columns>
            <RadzenDataGridColumn TItem="Trent.ViewModels.WerkstattterminGrundView" Property="TerminGrund" Title="Termin Grund">
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="Trent.ViewModels.WerkstattterminGrundView" FormatString="{0:C}" Property="KostenNetto" Title="Kosten Netto">
            </RadzenDataGridColumn>
          </Columns>
        </RadzenDataGrid>
      </div>
      <div class="col-md-4">
        <RadzenDataGrid @ref="datagrid1" AllowPaging="true" Data="@WerstattterminGruendeHaengerDataGrid" Density="Density.Compact" EmptyText="Keine Daten" TItem="Trent.ViewModels.WerkstattterminGrundView" PageNumbersCount="2" PageSize="5" ShowExpandColumn="false" Visible="@MitHaenger">
          <Columns>
            <RadzenDataGridColumn TItem="Trent.ViewModels.WerkstattterminGrundView" Property="TerminGrund" Title="Termin Grund">
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="Trent.ViewModels.WerkstattterminGrundView" FormatString="{0:C}" Property="KostenNetto" Title="Kosten Netto">
            </RadzenDataGridColumn>
          </Columns>
        </RadzenDataGrid>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <RadzenTemplateForm Data="@Werkstatttermin" TItem="Trent.Models.Trentdb.WerkstattTermin" Visible="@(Werkstatttermin != null)" Submit="@Form0Submit">
          <ChildContent>
            <div style="margin-bottom: 1rem" class="row">
              <div class="col-md-11">
                <RadzenFormField style="width: 100%" Text="Werkstatt" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenDropDown AllowClear="true" Data="@WerkstaettenDropDownResult" style="display: block; height: ; width: 100%" TextProperty="AdresstextZeile" @bind-Value="@(Werkstatttermin.WerkstattpartnerId)" ValueProperty="PartnerId" Name="WerkstattPartnerId">
                    </RadzenDropDown>
                    <RadzenRequiredValidator Component="WerkstattpartnerId" DefaultValue="0" style="position: absolute" Text="Auswahl erforderlich">
                    </RadzenRequiredValidator>
                  </ChildContent>
                </RadzenFormField>
              </div>
              <div class="col-md-1  d-flex align-items-center" style="margin-top: 11px">
                <RadzenButton ButtonStyle="ButtonStyle.Secondary" Image="assets/images/plus-solid.svg" Size="ButtonSize.ExtraSmall">
                </RadzenButton>
              </div>
            </div>
            <div style="margin-bottom: 1rem" class="row">
              <div class="col-md-6">
                <RadzenFormField style="width: 94%" Text="Ansprechpartner" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenDropDown AllowClear="true" AllowSelectAll="false" Data="@AnsprechpartnerDropDownResult" style=@($"display: flex; float: left; width: 88%;padding: 0px 0px 0px 16px") TextProperty="DropDownText" @bind-Value="@(Werkstatttermin.AnsprechpartnerId)" ValueProperty="AnsprechpartnerId" Name="Dropdown1">
                      <Template Context="trentViewModelsWerkstattterminGrundView">
                        <div class="row">
                          <div class="col-md-8">
                            <RadzenLabel Text="@($"{(trentViewModelsWerkstattterminGrundView.DropDownText)}")">
                            </RadzenLabel>
                          </div>
                          <div class="d-flex justify-content-end col-md-4">
                            <RadzenHtml>
                              <RadzenButton ButtonStyle="ButtonStyle.Secondary" Disabled="@(String.IsNullOrEmpty(trentViewModelsWerkstattterminGrundView.Telefon))" Image="assets/images/telefonnummer-hell.svg" Size="ButtonSize.ExtraSmall" Click="@((args)=>AnsprechpartnerTelefon(trentViewModelsWerkstattterminGrundView.AnsprechpartnerId, trentViewModelsWerkstattterminGrundView.Telefon))">
                                                          </RadzenButton>
                            </RadzenHtml>
                            <RadzenHtml>
                              <RadzenButton ButtonStyle="ButtonStyle.Secondary" Disabled="@(String.IsNullOrEmpty(trentViewModelsWerkstattterminGrundView.Mobil))" Image="assets/images/mobiltelefon-hell.svg" Size="ButtonSize.ExtraSmall" Click="@((args)=>AnsprechpartnerTelefon(trentViewModelsWerkstattterminGrundView.AnsprechpartnerId, trentViewModelsWerkstattterminGrundView.Mobil))">
                                                          </RadzenButton>
                            </RadzenHtml>
                          </div>
                        </div>
                      </Template>
                      <ValueTemplate Context="trentViewModelsWerkstattterminGrundView">
                        <div style="padding-top: 0px" class="row">
                          <div class="col-md-12">
                            <RadzenLabel Text="@($"{(trentViewModelsWerkstattterminGrundView.DropDownText)}")">
                            </RadzenLabel>
                          </div>
                        </div>
                      </ValueTemplate>
                    </RadzenDropDown>
                  </ChildContent>
                </RadzenFormField>
                <RadzenButton ButtonStyle="ButtonStyle.Secondary" Image="assets/images/plus-solid.svg" Size="ButtonSize.ExtraSmall" style="display: inline-block; margin-left: 5px; margin-top: 17px" Click="@BtnAddAnsprechpartnerClick">
                </RadzenButton>
              </div>
              <div class="col-md-6">
                <RadzenFormField style="width: 100%" Text="Telefon/EMail" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenTextBox AutoComplete="false" MaxLength="100" Trim="true" @bind-Value="@(Werkstatttermin.AnsprechpartnerEmailTelefon)" Name="Textbox0">
                    </RadzenTextBox>
                  </ChildContent>
                </RadzenFormField>
              </div>
            </div>
            <div style="margin-bottom: 1rem" class="row">
              <div class="col-md-3">
                <RadzenFormField style="width: 100%" Text="FZ Abgabe" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenDatePicker AllowClear="true" AllowInput="false" DateFormat="dddd, dd.MM.yyyy HH:mm" ShowTime="true" ShowTimeOkButton="true" style="display: block; width: 100%" @bind-Value="@(Werkstatttermin.AbgabeZeitpunkt)" Name="AbgabeZeitpunkt">
                    </RadzenDatePicker>
                    <RadzenRequiredValidator Component="AbgabeZeitpunkt" style="position: absolute" Text="Eingabe erforderlich">
                    </RadzenRequiredValidator>
                  </ChildContent>
                </RadzenFormField>
              </div>
              <div class="col-md-3">
                <RadzenFormField style="width: 100%" Text="FZ Abholung" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenDatePicker AllowClear="true" AllowInput="false" DateFormat="dddd, dd.MM.yyyy HH:mm" Min="@AbholzeitpunktMinDate" ShowTime="true" style="display: block; width: 100%" @bind-Value="@(Werkstatttermin.AbholungZeitpunkt)" Name="AbgabeZeitpunkt">
                    </RadzenDatePicker>
                    <RadzenRequiredValidator Component="AbgabeZeitpunkt" style="position: absolute" Text="Eingabe erforderlich">
                    </RadzenRequiredValidator>
                  </ChildContent>
                </RadzenFormField>
              </div>
            </div>
            <div style="margin-bottom: 1rem" class="row">
              <div class="col-md-2" >
                <RadzenLabel Component="ErsatzfahrzeugReserviert" style="font-size: 12px; line-height: 15px; padding-bottom: 0px; padding-top: 0px" Text="Ersatzfahrzeug reserviert ?">
                </RadzenLabel>
                <RadzenCheckBox style="display: block; float: none; width: 20px" TriState="false" @bind-Value="@(Werkstatttermin.ErsatzfahrzeugReserviert)" Name="ErsatzfahrzeugReserviert">
                </RadzenCheckBox>
              </div>
              <div class="col-md-6">
                <RadzenFormField style="width: 100%" Text="Beschreibung" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenTextArea Cols="60" Rows="4" Name="Textarea0">
                    </RadzenTextArea>
                  </ChildContent>
                </RadzenFormField>
              </div>
            </div>
            <div class="row">
              <div class="col offset-sm-3 justify-content-center d-flex" style="margin-left: 0px">
                <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Image="assets/images/thumbs-up-solid.svg" Text="Speichern">
                </RadzenButton>
                <RadzenButton ButtonStyle="ButtonStyle.Warning" Image="assets/images/thumbs-down-solid.svg" style="margin-left: 1rem" Text="Abbruch" Click="@Button4Click">
                </RadzenButton>
              </div>
            </div>
          </ChildContent>
        </RadzenTemplateForm>
      </div>
    </div>
  </ChildContent>
</RadzenContent>

but when i define a click event on the werkstattpartner dropdown radzen generates strange parameter "trentViewModelsWerkstattterminGrundView" for the click event in this part here:

                <RadzenFormField style="width: 100%" Text="Werkstatt" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenDropDown AllowClear="true" Data="@WerkstaettenDropDownResult" style="display: block; height: ; width: 100%" TextProperty="AdresstextZeile" @bind-Value="@(Werkstatttermin.WerkstattpartnerId)" ValueProperty="PartnerId" Name="WerkstattPartnerId" Change="@((args) =>WerkstattPartnerIdChange(args, trentViewModelsWerkstattterminGrundView))">
                    </RadzenDropDown>
                    <RadzenRequiredValidator Component="WerkstattpartnerId" DefaultValue="0" style="position: absolute" Text="Auswahl erforderlich">
                    </RadzenRequiredValidator>
                  </ChildContent>
                </RadzenFormField>

This will be exactly the same when i define a click event on the "fz abgabe" datetime control:

                <RadzenFormField style="width: 100%" Text="FZ Abgabe" Variant="Variant.Text">
                  <ChildContent>
                    <RadzenDatePicker AllowClear="true" AllowInput="false" DateFormat="dddd, dd.MM.yyyy HH:mm" ShowTime="true" ShowTimeOkButton="true" style="display: block; width: 100%" @bind-Value="@(Werkstatttermin.AbgabeZeitpunkt)" Name="AbgabeZeitpunkt" Change="@((args) =>AbgabeZeitpunktChange(args, trentViewModelsWerkstattterminGrundView))">
                    </RadzenDatePicker>
                    <RadzenRequiredValidator Component="AbgabeZeitpunkt" style="position: absolute" Text="Eingabe erforderlich">
                    </RadzenRequiredValidator>
                  </ChildContent>
                </RadzenFormField>

i dont know why radzen is generating the "trentViewModelsWerkstattterminGrundView". I think it has something todo with the context/childcontent and formfields

please help

Thomas

2

Thanks for the report @Thomas! We will do our best to provide fix for this in our next update (hopefully tomorrow).

3

Great! Looking forward to the Update!

4

i have another problem with Formfileds (hope its ok to append it here)

The page from above looks like this when opening it

image
image1581×394 59.7 KB

Why are some Labeltext "above" the formfield and some are "inside" the form field?
i expect that all labels are in the formfield when there is no value and the label moves above when the field got the focus and stays there when the user puts data into the field.

Actually it looks "mixed up". Some are above, some inside.
cant recognize with one look which fields are filled (with default values) and which must be filled.

Can a change this behaviour from my side? i prefer to have one look (in my opinion all above). all above or all inside but not mixed.

Regards
Thomas

5

RadzenFormField different - Radzen.Blazor Components - Radzen