Angular TileView - Keyboard Support

An end user can use the following keys to interact with the UI component.

Key Action
Shift + Mouse Wheel Scrolls the content left/right if the direction property is "horizontal".
Arrow Keys Moves focus to the neighboring tile.
Home Moves focus to the very first tile.
End Moves focus to the very last tile.
Enter or Space Selects the focused tile.

Use the registerKeyHandler(key, handler) method to implement a custom handler for a key.

jQuery
index.js
const tileView = $('#tileViewContainer').dxTileView('instance');

tileView.registerKeyHandler('backspace', function(e) {
    // The argument 'e' contains information about the event
});
tileView.registerKeyHandler('space', function(e) {
    // ...
});
Angular
app.component.ts
import { ViewChild, AfterViewInit } from '@angular/core';
import { DxTileViewComponent } from 'devextreme-angular/ui/tile-view';

@Component({
    imports: [DxTileViewComponent],
    // ...
})
export class AppComponent implements AfterViewInit {
    @ViewChild(DxTileViewComponent, { static: false }) tileView!: DxTileViewComponent;
    // Prior to Angular 8
    // @ViewChild(DxTileViewComponent) tileView: DxTileViewComponent;

    ngAfterViewInit () {
        this.tileView.instance.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information about the event
        });
        this.tileView.instance.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
Vue
Code
<template>
    <DxTileView ref="tileViewRef" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { DxTileView } from 'devextreme-vue/tile-view';

const tileViewRef = ref<DxTileView | null>(null);

onMounted(() => {
    tileViewRef.value.instance.registerKeyHandler('backspace', function(e) {
        // The argument "e" contains information about the event
    });
    tileViewRef.value.instance.registerKeyHandler('space', function(e) {
        // ...
    });
})

</script>
React
App.tsx
import React, { useRef, useEffect } from 'react';
import { TileView, type TileViewRef } from 'devextreme-react/tile-view';

function App() {
    const tileViewRef = useRef<TileViewRef>(null);

    useEffect(() => {
        const tileView = tileViewRef.current.instance();
        tileView.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information about the event
        });
        tileView.registerKeyHandler('space', function(e) {
            // ...
        });
    }, []);

    return (
        <TileView ref={tileViewRef} />
    );
}
See Also
jQuery
Angular
Vue
React