|
@inject
IJSRuntime RunTime
<SfGrid
DataSource="@Orders" ID="Grid" AllowPaging="true"
Height="200" @ref="Grid" Toolbar=@ToolbarItems>
</SfGrid>
<SfButton
@ref="sfButton" OnClick="Update">Update</SfButton>
@code
{
private SfGrid<OrderData> Grid;
SfButton sfButton { get; set; }
public string[] ToolbarItems = new string[] { "Add",
"Delete","Update" };
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
[JSInvokable("ChangeFocusUpdate")]
// Make this method callable from JavaScript
public async
Task FocusUpdateButton()
{
await sfButton.FocusAsync();
}
public async Task Update()
{
}
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender) // Only
set this on the first render
{
var dotNetReference = DotNetObjectReference.Create(this);
RunTime.InvokeAsync<string>("UpdateFocus", dotNetReference);
// Pass reference to JS
}
return base.OnAfterRenderAsync(firstRender);
}
}
//JavaScript.js
var dotnetInstance;
function
filter(dotnet) {
dotnetInstance = dotnet; // dotnet instance to invoke C# method from JS
}
// Attach the keydown event listener
document.addEventListener('keydown',
function (event) {
// Check if the
Tab key is pressed
if (event.key ===
'Tab') {
const
focusedElement = document.activeElement;
if ( focusedElement && focusedElement.parentElement.id ===
"Grid_add") {
// Prevent the default tab behavior
event.preventDefault();
// Call the C# method to handle focus change
dotnetInstance.invokeMethodAsync('ChangeFocusUpdate'); // call C# method from
javascript function
}
}
});
|
