Is there a way to handle keyboard events in grid.

[paul stanley]

Hi

Is there anyway to capture keyboard events such as Keydown or Keypress on the grid please?

[Vignesh Natarajan]

Hi Paul,  

 

Greetings from Syncfusion support.  

 

Query: “Is there anyway to capture keyboard events such as Keydown or Keypress on the grid please?” 

 

From your query we understand that you want to capture the keyboard events in Grid component. By default, we have provided support for different events which will be triggered during a certain action in Grid. So kindly share the following detail to validate the reported query at our end.    

 

1. Do you want to open a dialog while pressing the key by selecting a record?
2. Or do you want to perform Edit action on pressing the enter key.
3. Kindly share more details about your requirement.

 

Above requested details will be helpful for us to validate the reported query at our end and provide details as soon as possible.  

 

Regards, 

Vignesh Natarajan 

[paul stanley]

Greetings.

While focused on the grid but not editing I would like to be able to press a key for example a number and that number to be inserted else where on the page.

[Vignesh Natarajan]

Hi Paul,  

 

Thanks for the update.  

 

Query: “ I would like to be able to press a key for example a number and that number to be inserted else where on the page” 

 

We have achieved your requirement using onkeyup event of Blazor. We have displayed the pressed key value in page and if it is a number we have selected a record in Grid. Refer the below code example.  

 

<h1>Pressed Key: @pressedKey</h1> 

  

<div> 

    <SfGrid @ref="Grid" @onkeyup="onkeyup" DataSource="@Orders" AllowPaging="true"> 

        <GridColumns> 

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        </GridColumns> 

    </SfGrid> 

</div> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

    public string pressedKey { get; set; } 

    public async Task onkeyup(KeyboardEventArgs args) 

    { 

        pressedKey = args.Key; 

        int i = 0; 

        bool result = int.TryParse(args.Key, out i); //i now = 108 

        if (result) 

        { 

            await Grid.SelectRow(Convert.ToInt32(args.Key)); 

        } 

    } 

 

   

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/156072/ze/BlazorApp1200241604  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRow_System_Double_System_Nullable_System_Boolean__  

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan