Global Keyboard Event

[Alberto]

Hi, I'd like to know if you can use the 'keydown' event of the window to move the selection of a grid on the page. 

I have to create a page that contains a main grid and make sure that the arrow keys allow the selection to be changed without the user first selecting the grid.

I can imagine code like this: 

<EjsGrid ref="mainGrid" DataSource="@waiters">

<GridColumns>

<GridColumn Field=@nameof(Waiter.Id) IsPrimaryKey="true" IsIdentity="true" HeaderText=" Codice" Width="120"></GridColumn>

<GridColumn Field=@nameof(Waiter.Lastname) HeaderText="Cognome"></GridColumn>

<GridColumn Field=@nameof(Waiter.Name) HeaderText="Nome"></GridColumn>

</GridColumns>

</EjsGrid>

addEvent(document, "keydown", function (e) {

var keyDownEvent = event || window.event,

keycode = (keyDownEvent.which) ? keyDownEvent.which : keyDownEvent.keyCode;

if(keycode == 38)

{

// mainGrid.MoveUp(); ???

}

else if(keycode == 40)

{

// mainGrid.MoveDown(); ???

}

});

function addEvent(element, eventName, callback) {

if (element.addEventListener) {

element.addEventListener(eventName, callback, false);

} else if (element.attachEvent) {

element.attachEvent("on" + eventName, callback);

} else {

element["on" + eventName] = callback;

}

}

[Rahul Narayanasamy]

Hi Alberto, 

 

Greetings from Syncfusion. 

 

Query: I have to create a page that contains a main grid and make sure that the arrow keys allow the selection to be changed without the user first selecting the grid. 

 

We have validated your query and you want to change the selection of the record(row) without user manually selecting the grid at initial. You can achieve your requirement by using SelectedRowIndex property of the grid. By using this property, the provided row index in the grid is initially selected while rendering. After that you can change the selected row by using arrow keys. Please find the below code example and sample for your reference. 

 

[code example] 

... 

 

 

    <EjsGrid @ref="@Grid" DataSource="@Orders" AllowSelection="true" SelectedRowIndex="0"> 

        <GridColumns> 

            ... 

       </GridColumns> 

    </EjsGrid> 

 

@code{ 

 

    ... 

} 

 

 

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

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul