Hello I'm working on developing a Data grid within a Blazor Server application. I'm hoping to avoid as much JavaScript as possible (because I'm new to it), but I believe I need JavaScript for this. My datagrid is full of focusable cells(inputs), and the content is being virtualized. I'm needing to stop the scroll functionality with arrow keys on the Datagrid Component. A temporary solution I found was to place this:

window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
    }
}, false);

inside of the _Host.cshtml page. It works to prevent scrolling with arrow keys.

Here's the rub: I need to only prevent the arrow key event on the one Data grid Component rather than the whole window, because I use arrow keys elsewhere in the application. How can I achieve this?

EDIT

I've tried to reference the grid directly by Id to no avail. Again this code is in the _Host.cshtml and the user navigates through several pages before coming to the Datagrid. There is only one element on the datagrid containing the Id "CustomDataGrid".

var tar = document.GetElementById('CustomDataGrid');
tar.addEventListener("keydown", function (e) {
    if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
    }
}, false);