Custom Key Handling
Some of the Telerik UI for ASP.NET Core wrappers expose the KendoKeydown event. You can use this event to:
- Override a built-in key or key combination by blocking the default behavior and replacing it with your own logic.
- Add new key combinations that the component does not handle out of the box.
How the KendoKeydown Event Works
The event argument exposes the following relevant properties:
| Property | Type | Description |
|---|---|---|
e.sender | Object | The client-side component instance. |
e.keyCode | Number | The code of the pressed key. Use kendo.keys constants for readable comparisons. |
e.ctrlKey | Boolean | true when Ctrl is held. |
e.shiftKey | Boolean | true when Shift is held. |
e.altKey | Boolean | true when Alt is held. |
e.preventKendoKeydown | Boolean | Set to true to prevent the component from running its default keydown handler for this key press. |
Supported Components
The following wrappers support the KendoKeydown event:
Basic Usage Pattern
The example below shows the structure of a KendoKeydown handler. The same pattern applies to all supported wrappers.
@(Html.Kendo().Grid()
.Name("grid")
.Navigatable()
.Events(events => events.KendoKeydown("onGridKendoKeydown"))
)Blocking the Default Behavior
To prevent a wrapper from reacting to a specific key, set e.preventKendoKeydown to true for that key in the handler. You do not need to call e.preventDefault() in most cases because setting the flag is sufficient to stop the component from handling the key.
If you also want to prevent the browser's default behavior for that key, call e.preventDefault() in addition to setting the flag:
function onGridKendoKeydown(e) {
if (e.ctrlKey && e.keyCode === 82) {
e.preventDefault();
e.preventKendoKeydown = true;
}
}Adding a Custom Key Combination
You can add a key combination that the wrapper does not use. You do not need to set e.preventKendoKeydown = true in this case because there is nothing to block. Set the flag only when you want to take over a key that the component already handles.
function onGridKendoKeydown(e) {
if (e.keyCode === 73) {
console.log("Custom shortcut activated.");
}
}