I have a Telerik grid and am using inline editing. On edit, I have a select dropdown list for the user to select the option that he needs. In my view model if the user is in edit mode I would like for the drop down to have the selected value. It doesn't seem to work properly. Here is the column in my grid:
<GridColumn Field=@nameof(JobAssignmentListViewModel.Trade) Title="Trade" FieldType="@typeof(string)">
<EditorTemplate>
<select id="tradeList" class="form-select" value="@(context as JobAssignmentListViewModel).TradeId" @onchange="@(e => UpdateTradeAsync((JobAssignmentListViewModel)context, e))">
@foreach (var trade in trades)
{
var isSelected = trade.Id == (context as JobAssignmentListViewModel)?.TradeId;
<option value="@trade.Id" selected="@isSelected">@trade.Name</option>
}
</select>
</EditorTemplate>
</GridColumn>
This just renders selected=""
in the HTML when inspected. Is there a way to select the default option in Blazor for a dropdown?
You could try following sample:
@page "/"
<TelerikGrid Data=@JobAssignments EditMode="@GridEditMode.Inline" Pageable="true"
Height="500px" @ref="GridRef"
OnUpdate="@UpdateItem"
OnEdit="@EditHandler">
<GridColumns>
<GridColumn Field="Id" Title="ID" FieldType="@typeof(int)" Editable="false" />
<GridColumn Field="@nameof(JobAssignmentListViewModel.Trade)" Title="Trade" FieldType="@typeof(string)" Editable="true">
<EditorTemplate>
@if (context is JobAssignmentListViewModel model)
{
<select class="form-select" value="@model.Trade" @onchange="@(e => UpdateTradeAsync(model, e))">
@foreach (var trade in Trades)
{
<option value="@trade.Name">@trade.Name</option>
}
</select>
}
</EditorTemplate>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
private async Task UpdateTradeAsync(JobAssignmentListViewModel model, ChangeEventArgs e)
{
var selectedTrade = e.Value?.ToString();
model.Trade = selectedTrade;
await Task.CompletedTask;
}
private TelerikGrid<JobAssignmentListViewModel> GridRef { get; set; }
// Sample Trades list
private List<Trade> Trades = new()
{
new Trade { Id = 1, Name = "Plumber" },
new Trade { Id = 2, Name = "Electrician" },
new Trade { Id = 3, Name = "Carpenter" }
};
// Sample Job Assignments
private List<JobAssignmentListViewModel> JobAssignments = new()
{
new JobAssignmentListViewModel { Id = 1, Trade = "Electrician" },
new JobAssignmentListViewModel { Id = 2, Trade = "Carpenter" }
};
// Called when an item is edited
private void EditHandler(GridCommandEventArgs args)
{
var editedItem = args.Item as JobAssignmentListViewModel;
}
// Called when an item is updated (saved)
private void UpdateItem(GridCommandEventArgs args)
{
var updatedItem = args.Item as JobAssignmentListViewModel;
if (updatedItem != null)
{
var item = JobAssignments.FirstOrDefault(j => j.Id == updatedItem.Id);
if (item != null)
{
item.Trade = updatedItem.Trade;
}
}
}
// Model for the grid
public class JobAssignmentListViewModel
{
public int Id { get; set; }
public string Trade { get; set; }
}
// Model for trades
public class Trade
{
public int Id { get; set; }
public string Name { get; set; }
}
}