How can I prevent the selection of a row/cell in the DataGrid

[Robert Foster]

 I have a very simple grid and I do not want the user to be able to select a cell or a row and displaying the blue border. As you can see in the below screenshot the 2nd row Note column is highlighted. How can I prevent this from happening?

  Here is the code for the grid:

[Vikram Sundararajan]

Hi Robert,

Greetings from Syncfusion support,

Based on your query wants to prevent the selection of row/ cell. To achieve this, you can utilize the rowSelecting event. This event is triggered when selecting a row, and you can prevent the selection by setting args.cancel to true. Please refer the below code snippet, documentation and sample for more information.

[index.html]

 

  function rowSelecting(args) {

        args.cancel=true;

    }

rowSelecting: https://ej2.syncfusion.com/documentation/api/grid/#rowselecting

cellSelecting: https://ej2.syncfusion.com/documentation/api/grid/#cellselecting

Sample: https://stackblitz.com/edit/fposjc?file=index.js,index.html

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S

[Robert Foster]

@Vikram Sundararajan  Thank you. Soon I will try and add this to my application. I will update this thread with my results.

[Suganya Gopinath]

Sure, we will wait to hear from you. 

[Hudson Hooper]

Hello,

I am running into the same problem with the below code in React where the suggested fix doesnt seem to work

return (

<GridComponent key={uuid().toString()} dataSource={data} height="auto" allowSelection={false} enableHover={false} rowSelecting={rowSelecting}>

<ColumnsDirective>

{columns.map((c) => (

<ColumnDirective key={c.field.toString()} {...c} width={c.altWidth ?? `${100 / data.length}%`} />

))}

{canEdit && <ColumnDirective field="id" headerText="Edit" template={editTemplate} width={`${100 / data.length}%`} />}

{canDelete && <ColumnDirective field="id" headerText="Delete" template={deleteTemplate} width={`${100 / data.length}%`} />}

{canView && <ColumnDirective field="id" headerText="View" template={viewTemplate} width={`${100 / data.length}%`} />}

</ColumnsDirective>

</GridComponent>

);

[Joseph Christ Nithin Issack]

Hi Hudson,

  Greetings from Syncfusion support.

  Before proceeding with the solution, we would like you to share the below details.

• You have mentioned that you are not able to prevent the selection of rows in your grid, but in the image provided, we can see that you have set allowSelection as false. By default, in EJ2 Grid, when allowSelection is set to false, the selection will be prevented in EJ2 Grid. Please explain your exact requirement in detail.
• Video demo of the issue you are facing.
• Complete grid rendering code.
• Simple sample to replicate the issue.
• Syncfusion package version.

Regards,

Joseph I.

[Hudson Hooper]

Hello,

I am working in React with version 25.1.38 of the syncfusion/ej2-react-grids package. The issue I am facing is that the tables generated have a border around them when clicked on. Like below, for example: 

The code example that I previously provided is the entire grid rendering code using the GridComponent directly from that library. The template arguments for the columns all look like this:

function viewTemplate(props: S) {

return (

<div className="w-full">

<button

className="inline-flex items-center rounded-md bg-gray-50 px-4 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"

onClick={() => onView?.(props.id)}>

View

</button>

</div>

);

}

and the columns are all of the following type:

export interface AssetColumn {

field: string;

headerText: string;

type: "string" | "number"

altWidth?: number;

}

[Joseph Christ Nithin Issack]

Hi Hudson,

After reviewing your query, we could see that you like to disable the cell outline on selecting the row. You can achieve your requirement by using the below CSS.

Please refer the below code example:

<style>

    .e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {

        box-shadow: 0 0 0 0px #0d6efd inset;

   }

</style>

[Hudson Hooper]

Ok. I can use that, but how come the border still shows up even when selection is disabled all together with "allowSelection={false}"?

[Joseph Christ Nithin Issack]

Hi Hudson,

   Based on your query, the border shows up even if the selection is disabled. By default, the blue border in the cell indicates that the cell if focused, this is not related to the selection process.