1. Home
  2. Forum
  3. Blazor
  4. Toolbar shortcut keys in datagrid.

Toolbar shortcut keys in datagrid.

Hi team,

Is there is a way to apply shortcut key in toolbar.. for example if I press alt-A it will fire the add toolbar button.


best regards,

Tyrone


3 Replies
JP Jeevakanth Palaniappan Syncfusion Team July 30, 2021 01:06 PM UTC

Hi Tyrone, 

Greetings from Syncfusion support. 

We have prepared a sample to perform the CRUD operation by using keyboard shortcuts. We have achieved your scenario by using the DataBound event of the grid and also by using edit template for a column to bind the keyboard events to the edit form controls. Please refer the below code snippet and the sample for your reference. 

  1. Add - Alt+A
  2. Edit -Alt+E
  3. Cancel – Alt+C
  4. Delete – Delete key
  5. Update – Enter key

Note : The grid has to be in focus then only the functionality will work. 

Index.razor 
@using Syncfusion.Blazor.Grids 
@using Syncfusion.Blazor.DropDowns 
@inject IJSRuntime RunTime  
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel" })" Height="315" @onkeydown="KeyDownHandler"> 
    <GridEvents TValue="Order" DataBound="DataBound"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Type="ColumnType.Number" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"> 
            <EditTemplate> 
                <SfDropDownList ID="CustomerID" TItem="Order" TValue="string" @bind-Value="@((context as Order).CustomerID)" DataSource="Orders"> 
                    <DropDownListFieldSettings Value="CustomerID" Text="CustomerID"></DropDownListFieldSettings> 
                    <DropDownListEvents TItem="Order" TValue="string" Created="DropdownCreated"></DropDownListEvents> 
                </SfDropDownList> 
            </EditTemplate> 
        </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" EditType="EditType.NumericEdit" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    SfGrid<Order> Grid { get; set; } 
 
 
    public async Task DataBound() { 
        var dotNetObject = DotNetObjectReference.Create(this); 
        await RunTime.InvokeAsync<object>("setDotnetRef",dotNetObject); 
    } 
    [JSInvokable] 
    public async Task KeyPressed(string Action) { 
        if (Action == "Cancel") { 
            await Grid.CloseEditAsync(); 
        } 
    } 
 
    public async Task DropdownCreated() { 
        await RunTime.InvokeAsync<object>("registerEvent", Grid.ID); 
    } 
 
    public async Task KeyDownHandler(KeyboardEventArgs args) 
    { 
        if (args.AltKey) 
        { 
            if (args.Key == "A" || args.Key == "a") 
            { 
                await Grid.AddRecordAsync(); 
            } 
            else if (args.Key == "E" || args.Key == "e") 
            { 
                await Grid.StartEditAsync(); 
            } 
        } 
    } 
} 

Rte.js 
var dotNetInstance; 
function registerEvent(ID) { 
    var grid = document.getElementById(ID); 
    if (grid) { 
        var element = grid.querySelector('.e-editedrow') || grid.querySelector('.e-addedrow'); 
        element.addEventListener("keydown", function (e) { 
            if (e.altKey) { 
                if (e.key === "C" || e.key === "c") { 
                    dotNetInstance.invokeMethodAsync("KeyPressed", "Cancel"); 
                } 
            } 
 
        }) 
    } 
     
} 
function setDotnetRef(dotNetRef) { 
    dotNetInstance = dotNetRef; 
} 

Host.cshtml 
<head> 
    <script src="~/rte.js"></script> 
</head> 


Get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


TY Tyrone August 1, 2021 05:48 AM UTC

Thanks Jeevakanth,


It worked :). however I need to refocus at the grid to make it work.. 

My purpose of alt key is to speed up the encoding via keyboard.. After adding a new record the encoder will just press Alt-a to add another line. No need to mouse click the grid to refocus to make alt-a to work. 


thanks and Warm regards,


Tyrone


JP Jeevakanth Palaniappan Syncfusion Team August 2, 2021 07:17 AM UTC

Hi Tyrone, 

Based on your scenario, after adding a record, based on the RequestType and Action, we have focused the grid in the OnActionComplete event.  Please refer the below code snippet and the sample for your reference. 



<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel" })" Height="315" @onkeydown="KeyDownHandler"> 
    <GridEvents TValue="Order" OnActionComplete="OnActionComplete"></GridEvents> 
.. 
</SfGrid> 
 
@code{ 
    public async Task OnActionComplete(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) && args.Action.Equals("Add")) 
        { 
            await Grid.FocusAsync(); 
        } 
    } 
} 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon