How to enable edit mode for DetailTemplate in Blazor DataGrid?

[Syncfusion Support]

Answer:

To enable edit mode for DetailTemplate define @onkeydown:stopPropagation as true. Here is the code snippet for your reference,

<SfGrid DataSource="@Employees">

<GridTemplates>

<DetailTemplate>

@{

var employee = (context as EmployeeData);

<table class="detailtable" width="100%">

. . .

<tbody>

. . .

<tr>

<td>

<span style="font-weight: 500;">Last Name: span> @employee.LastName

<label class="e-float-text e-label-top">Order IDlabel>

<div @onkeydown:stopPropagation="true">

<SfTextBox ID="LastName" @bind-Value="@employee.LastName">SfTextBox>

div>

td>

<td>

<span style="font-weight: 500;">City: span> @employee.City

<div @onkeydown:stopPropagation="true">

<SfTextBox ID="City" @bind-Value="@employee.City">SfTextBox>

div>

td>

tr>

. . .

tbody>

table>

}

DetailTemplate>

GridTemplates>

<GridColumns>

<GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" Width="110"> GridColumn>

. . .

GridColumns>

SfGrid>

Find the sample for enable edit mode in DataGrid DetailTemplate from here.