How can i add an additional key to triggering clossing the column options

[jobou363]

With the fluent datagrid i just want to close the column option when i press on "Enter" on the field that confirm the filter but i can't figure how i can do this :

I see that the datagrid has a CloseColumnOptions function that is private.

private void CloseColumnOptions() { _displayOptionsForColumn = null; StateHasChanged(); }

I look into the code of the fluent data grid that has a javascript file with key event "Escape" for closing the column options so i figured out how it's working.

src/Core/Components/DataGrid/FluentDataGrid.razor.js

const keyDownHandler = event => { const columnOptionsElement = gridElement?.querySelector('.col-options'); if (columnOptionsElement) { if (event.key === "Escape") { gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true })); gridElement.focus(); } columnOptionsElement.addEventListener( "keydown", (event) => { if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") { event.stopPropagation(); } } ); } };

I have than tried to load a copy of the same javascript but with the Enter key also handled but

The grid event init fail on gridElement.querySelectorAll saying it doesn't exist.

The problem look to be related to the object gridElement and the @ref="Reference" doesn't seems to be loaded correctly.

<FluentDataGrid @ref="Reference" GridTemplateColumns="@GridTemplateColumns" Class="participantListFluentDataGrid" Context="GridContext" ItemsProvider="@GridItemsProvider" TGridItem="ParticipantDto" GenerateHeader="GenerateHeaderOption.Default" >

......

`protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/Administration/Participant/List.razor.js");

        //// Replace with your grid element ID
        await module.InvokeVoidAsync("init", Reference);
    }
}

const keyDownHandler = event => {
const columnOptionsElement = gridElement?.querySelector('.col-options');
if (columnOptionsElement) {

if (event.key === "Enter") {
console.log('Escape');
gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
gridElement.focus();
}

    if (event.key === "Escape") {
        console.log('Escape');
        gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
        gridElement.focus();
    }
    columnOptionsElement.addEventListener(
        "keydown",
        (event) => {
            if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
                event.stopPropagation();
            }
        }
    );
}

};`