We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Global Keyboard Event

Thread ID:

Created:

Updated:

Platform:

Replies:

146760 Aug 18,2019 07:54 PM UTC Aug 19,2019 11:39 AM UTC Blazor 1
loading
Tags: Grid
Alberto
Asked On August 18, 2019 07:54 PM UTC

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 [Syncfusion]
Replied On August 19, 2019 11:39 AM UTC

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{ 
 
    ... 
} 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon