|
@inject IJSRuntime JsRuntime
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" @onkeydown="OnKeyDown" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height ="315">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
<GridKeySettings MoveDownCell="ArrowDown" MoveUpCell="ShiftEnter,ArrowUp"></GridKeySettings>
<GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings>
<GridEvents CellSelected="Selected" TValue="Order"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer
Name" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<Order> Orders { get; set; }
SfGrid<Order> Grid { get; set; }
public double CellIndex{ get; set; }
public double RowIndex { get; set; }
public async Task Selected(CellSelectEventArgs<Order> Args)
{
CellIndex = Args.CellIndex;
RowIndex = Args.RowIndex;
}
public async Task OnKeyDown(KeyboardEventArgs Args)
{
if(Args.Code == "Enter")
{
await
Grid.SelectRowAsync(RowIndex);
var selected = await
Grid.GetSelectedRecordsAsync();
if(selected.Count > 0)
{
await Grid.StartEditAsync();
var col = Grid.Columns[(int)CellIndex];
await
JsRuntime.InvokeVoidAsync("editFocus", col.Field);
}
}
}
[javascript.js]
function editFocus(id) {
setTimeout(function () {
document.getElementById(id).focus();
}, 250)
}
|
