What is the recommended way to add labels on the edit template field in Blazor DataGrid?

[Dinesh Rajendiran]

Answer:

To add label for EditTemplate field in Dialog editing use FloatLabelType property. By using this way, the PlaceHolder value will set as Label for that field. Here is the code snippet for your reference.

<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Dialog">GridEditSettings>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140">GridColumn>

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">

<EditTemplate>

<SfDropDownList ID="CustomerID" TValue="string" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" Placeholder="CustomerID" TItem="Countries" @bind-Value="((context as Order).CustomerID)" DataSource="@Names">

<DropDownListFieldSettings Value="Name">DropDownListFieldSettings>

SfDropDownList>

EditTemplate>

GridColumn>

. . .

GridColumns>

SfGrid>

We can also define the label for a field in EditTemplate as like below.

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">

<EditTemplate>

<span>CustomerIDspan>

<SfDropDownList ID="CustomerID" TValue="string" TItem="Countries" @bind-Value="((context as Order).CustomerID)" DataSource="@Names">

<DropDownListFieldSettings Value="Name">DropDownListFieldSettings>

SfDropDownList>

EditTemplate>

GridColumn>

Find the sample to add labels on the edit template field in Blazor Data Grid here.