Don't select checkbox when open context menu

[Ton That Hung]

Hi Syncfusion team

I am using the checkbox and context menu in the Grid component. When I open the context menu, the checkbox is also selected. I want to disable this feature (the checkbox is only selected when I click it).

How can I do that?

Thanks

Regards,

Hung Ton

[Rajapandi Ravi]

Hi Ton, 

Greetings from Syncfusion support 

You can resolve this problem by cancelling the selection action on context menu open as explained below, 

Initially override the Grid context menu module’s beforeOpen event where a global flag variable is enabled to identify this case and then the default source action is executed. 

constructor() { 

    super(...arguments); 

    this.preventSelect = false; 

} 

 

// Grid’s created event handler 

onCreated() { 

    // The Grid context menu’s beforeOpen event is stored in a variable 

    var contextMenuOpenFn = this.gridInstance.contextMenuModule.contextMenu.beforeOpen; 

    // Root application instance is stored in a variable 

    var curInstance = this; 

    // The Grid context menu’s beforeOpen event is overridden 

    this.gridInstance.contextMenuModule.contextMenu.beforeOpen = function (e) { 

        // The global flag variable is enabled here to identify this case 

        // Since the context menu instance will be available here, we are accessing the global flag from the application root instance stored in the variable 

        curInstance.preventSelect = true; 

        // The default source beforeOpen method(stored in the variable) is executed 

        contextMenuOpenFn.call(this, e) 

    } 

} 

Now in the Grid’s rowSelecting event(triggers before a row is selected), cancel the action if the global flag is enabled by setting the ‘cancel’ event arguments as ‘true’. 

// Grid’s rowSelecting event handler 

rowSelecting(args) { 

    if (this.preventSelect) { 

        // Condition executes if the global flag is enabled 

        // The selection action is prevented 

        args.cancel = true; 

        // The global flag is disabled here so that consecutive checkbox selection action is not prevented 

        this.preventSelect = false; 

    } 

} 

We have prepared a sample based on the above queries for your reference. Please find it below, 

Sample: https://stackblitz.com/edit/react-e8j9t4-r73cim 

API: https://ej2.syncfusion.com/react/documentation/api/grid/#created 

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

Let us know if you have any concerns. 

Regards, 

Rajapandi R 

[Ton That Hung]

Thanks for your solution.

Regards, 

Hung Ton

[Rajapandi Ravi]

Hi Ton, 

We are happy to hear that the provided solution works fine at our end. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R 

[Ton That Hung]

Hi Rajapandi Ravi,

When I use your solution and Hierarchy feature, it works in React v17 but doesn't work (checkbox is still checked when open context menu) in React v18.

Sample React v17: https://stackblitz.com/edit/react-uyjgxh-iabsdr?file=index.js
Sample React v18: https://stackblitz.com/edit/react-e8j9t4-9zkulc?file=index.js

How can I fix it?

Thanks

[Joseph Christ Nithin Issack]

Currently we are validating your query, we will provide further details on or before April 11^th 2022. We appreciate your patience until then.

[Ton That Hung]

Thank you.

I will wait for your solution.

[Joseph Christ Nithin Issack]

Thanks for the update. We will provide further details as promised.

[Rajapandi Ravi]

Hi Ton,

Thanks for your patience

We have checked your shared problem and we found that the problem was not occurs based on the React V17/18. The problem comes from the Grid older package version, in your shared React v18 sample the Grid has 19.2.62 older version. In React v17 sample the Grid has the 19.4.54 newer version. So, we would like to inform you that the problem was not related to the React version and it was related to the Syncfusion Grid package version.

To resolve the problem, we suggest you use the latest package version and achieve your requirement. Please refer the below modified React v18 sample for more information.

Sample: https://stackblitz.com/edit/react-e8j9t4-m6g7b4?file=package.json

Screenshot:

Regards,

Rajapandi R

[Ton That Hung]

Thanks for your support.

[Rajapandi Ravi]

Hi Ton,

We are happy to hear that the provided solution works fine at our end.

Please get back to us if you need further assistance.

Regards,

Rajapandi R