Rowselected only with enter key

[Walter Martin]

I'm using Blazor server side, and I'd like to use the keyboard arrow up and down only to move the record position up and down and leave the customer to select the record only pressing the enter key (or with the mouse double click)

I handled the mouse double click with the relative event but when I press the arrow up or down the rowselected event is fired.

How can I avoid it ?

[Renjith Singh Rajendran]

Hi Walter, 

Greetings from Syncfusion support. 

Query : when I press the arrow up or down the rowselected event is fired. How can I avoid it ? 

Based on this scenario, we suggest you to use Microsoft JsInerop. Using this, we suggest you to bind the JavaScript “keydown” event for Grid content element and prevent the keyboard navigation in Grid based on your requirement. Please refer the codes below 

 

<GridEvents Created="Created" ... TValue="Order"></GridEvents> 

public async Task Created(){    await IJSRuntime.InvokeAsync<object>("keydownprevent");}

 

[preventkeydown.js] 

 

function keydownprevent() {    document.getElementById("DataGrid").querySelector(".e-gridcontent").addEventListener("keydown", function (evt) {        if (evt.code == "ArrowDown" || evt.code == "ArrowUp" ) {            evt.stopImmediatePropagation();        }    }, false);}

We are also attaching the sample for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1420817735 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Walter Martin]

Thanks for this reply, but using your sample, when I press up or down keys, the cursor position in the grid doesn't change at all

I'd like to move the row cursor up and down with the arrows up and down keys (without generating the rowselected event) and just use the Enter key when I want to select a row.

Like in a normal use when you don't have a mouse

Or, if not possible, I can leave the standard behaviour and avoid to handle the rowselected event but in this case I need another event to get the enter key press event where I can retrieve the row selected.

[Renjith Singh Rajendran]

Hi Walter, 

Thanks for your update. 

Query : but in this case I need another event to get the enter key press event where I can retrieve the row selected. 

By default the arrow keys will also select the rows in Grid, the previous solution will completely prevent the arrow up/down key actions associated with grid. But based on your requirement, we could see that you want to fetch the selected row when clicking on Enter key. If so, then we suggest you to bind @onkeydown event to Grid instead of RowSelected. And based on key code you can call the GetSelectedRecords method of Grid to get the selected row.  

Please refer and use the codes below, 

 

<SfGrid ID="DataGrid" @ref="Grid" DataSource="@Orders" AllowPaging="true" @onkeydown="onkeydown"> 

    ... 

</SfGrid> 

SfGrid<Order> Grid;public async Task onkeydown(KeyboardEventArgs args){    if(args.Code == "Enter")    {        //here you can get the selected record        var selectedRow = await Grid.GetSelectedRecords();    }}

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1682853954 

If we have misunderstood your requirement or if you still need further assistance, then kindly share with us a detailed explanation of your complete requirement to proceed further. 

Regards, 

Renjith R 

[Walter Martin]

This is exaclty what I needed

Thanks

[Renjith Singh Rajendran]

Hi Walter, 

We are glad to hear your requirement has been achieved. Please get back to us if you need further assistance. 

Regards, 

Renjith R