Custom Key Handling

Updated on Jun 3, 2026

Some of the Telerik UI for ASP.NET MVC 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:

Component	Key Handling Article
ActionSheet	Custom Key Handling in ActionSheet
AIPrompt	Custom Key Handling in AIPrompt
AutoComplete	Custom Key Handling in AutoComplete
BottomNavigation	Custom Key Handling in BottomNavigation
Button	Custom Key Handling in Button
ButtonGroup	Custom Key Handling in ButtonGroup
Calendar	Custom Key Handling in Calendar
Chart Wizard	Custom Key Handling in Chart Wizard
Chip	Custom Key Handling in Chip
ChipList	Custom Key Handling in ChipList
ColorPicker	Custom Key Handling in ColorPicker
ComboBox	Custom Key Handling in ComboBox
DateInput	Custom Key Handling in DateInput
Dialog	Custom Key Handling in Dialog
Drawer	Custom Key Handling in Drawer
DropDownList	Custom Key Handling in DropDownList
DropDownTree	Custom Key Handling in DropDownTree
ExpansionPanel	Custom Key Handling in ExpansionPanel
Filter	Custom Key Handling in Filter
FloatingActionButton	Custom Key Handling in FloatingActionButton
Gantt	Custom Key Handling in Gantt
Grid	Custom Key Handling in Grid
ImageEditor	Custom Key Handling in ImageEditor
InlineAIPrompt	Custom Key Handling in InlineAIPrompt
ListBox	Custom Key Handling in ListBox
ListView	Custom Key Handling in ListView
MediaPlayer	Custom Key Handling in MediaPlayer
Menu	Custom Key Handling in Menu
MultiSelect	Custom Key Handling in MultiSelect
MultiViewCalendar	Custom Key Handling in MultiViewCalendar
NumericTextBox	Custom Key Handling in NumericTextBox
OrgChart	Custom Key Handling in OrgChart
OTPInput	Custom Key Handling in OTPInput
Pager	Custom Key Handling in Pager
PanelBar	Custom Key Handling in PanelBar
PDFViewer	Custom Key Handling in PDFViewer
PropertyGrid	Custom Key Handling in PropertyGrid
Rating	Custom Key Handling in Rating
Scheduler	Custom Key Handling in Scheduler
Slider	Custom Key Handling in Slider
SpeechToTextButton	Custom Key Handling in SpeechToTextButton
Splitter	Custom Key Handling in Splitter
Spreadsheet	Custom Key Handling in Spreadsheet
Stepper	Custom Key Handling in Stepper
Switch	Custom Key Handling in Switch
TileLayout	Custom Key Handling in TileLayout
TimeDurationPicker	Custom Key Handling in TimeDurationPicker
Timeline	Custom Key Handling in Timeline
ToggleButton	Custom Key Handling in ToggleButton
ToolBar	Custom Key Handling in ToolBar
TreeList	Custom Key Handling in TreeList
TreeView	Custom Key Handling in TreeView
Window	Custom Key Handling in Window
Wizard	Custom Key Handling in Wizard

Basic Usage Pattern

The example below shows the structure of a KendoKeydown handler. The same pattern applies to all supported wrappers.

Razor

	@(Html.Kendo().Grid()
		.Name("grid")
		.Navigatable()
		.Events(events => events.KendoKeydown("onGridKendoKeydown"))
	)

javascript

	function onGridKendoKeydown(e) {
		var component = e.sender;
		var keys = kendo.keys;

		if (e.keyCode === keys.DOWN) {
			e.preventKendoKeydown = true;
		}

		if (e.keyCode === 68) {
			e.preventKendoKeydown = true;
			console.log(component.element.attr("id"), "handled a custom key.");
		}

		if (e.ctrlKey && e.keyCode === 88) {
			e.preventKendoKeydown = true;
			console.log(component.element.attr("id"), "handled Ctrl+X.");
		}
	}

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:

javascript

	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.

javascript

	function onGridKendoKeydown(e) {
		if (e.keyCode === 73) {
			console.log("Custom shortcut activated.");
		}
	}

See Also

• Accessibility in Telerik UI for ASP.NET MVC