Issue with Grid cell focus and background JavaScript

I have an inventory type app where I have a grid with a list of devices. I have some JS code that is listening to the keyboard buffer in the background. This is to handle if a barcode is scanned using a barcode scanner.


In this image, I just navigate to the page and don't click on anything. I can scan the barcode with my barcode scanner and everything works just fine.

ScannerScreenshot1.png


In this image below, AllowSelection is set to false for the grid. But when I click any cell it has this blue border which I would assume means that's where the focus for the page is. I can then click the tab button and that blue outline will move across each cell. The problem is, when the grid has focus, I'm assuming it's listening for a key press (hence the ability to tab through cells) which ultimately blocks the JS code listening to the keyboard buffer from ever getting hit. If I put focus into the search text box of the grid the scanning works just fine. It's just if a cell is clicked or the focus is on a row or cell. Is there any possible way to disable all types of focus or selection within the grid so that this JS code and get hit. My concern is a user can accidently click a cell and then scanning isn't going to work at all. The ability to scan should be available on the page regardless of what has focus.

ScannerScreenshot2.png


1 Reply

PS Prathap Senthil Syncfusion Team June 18, 2024 08:54 AM UTC

Hi Joe,



To achieve the desired functionality of disabling focus and selection within the using CSS modifications, you can add custom CSS to override the default focus styles and prevent cells from being focusable. Kindly refer to the below code snippet and simple sample for your reference.

<SfGrid DataSource="@Orders" AllowSelection="false"   Toolbar="@(new List<string>{"Search"})" AllowPaging="true">

    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID)  HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

<style>

  

    .e-grid .e-rowcell {

    

        pointer-events: none; /* This prevents interaction, but if you need interaction, do not use this */

    }

</style>

 


Sample: https://blazorplayground.syncfusion.com/embed/LjhfZxMbhheomGhS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Prathap Senthil


Loader.
Up arrow icon