We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

method to prevent used shift key at grid component

Hi,


I have used to checkbox, primarykey and persistentSelection to keep selected row at grid component.

but I want single selected row not multi, but i would to use shift key is possible mutli selected row.

I want to prevent this state.


thanks


5 Replies

JC Joseph Christ Nithin Issack Syncfusion Team October 14, 2022 12:41 PM UTC


Hi Sohyeonbak,


  Greetings from Syncfusion support.


  Based on the provided information, we can see that you are using checkbox in your grid. By default in EJ2 Grid, when check box is used the grid selection will automatically enable multiple selection, it cannot be single select. Please explain your requirement in details, do you want to prevent the multiple selection in your grid?


Please provide the above detail so that we can proceed further.


Regards,

Joseph I.



SO sohyeonbak October 17, 2022 12:28 AM UTC

hi,

Thank you for your question.

want to prevent the multiple selection in my grid.

But I have to use checkbox for persistSelection so I set checkbox for invisible and i used 'ResetOnRowClick' of checkboxmode.

This setting is possible single selection by click event.

but It is possible multiple selection If i used to shift key with click event.

even if i used shift key, I want to prevent multiple selection in my grid.



JC Joseph Christ Nithin Issack Syncfusion Team October 17, 2022 03:15 PM UTC

Hi Sohyeonbak,


  Thanks for your update.


   Based on your query, you want to prevent the selection when you press the shift key or ctrl key. Your requirement can be achieved by using the rowSelecting event of the EJ2 Grid.


   Please refer the below code example.

  

 

function rowSelecting(args) {

    if (args.isCtrlPressed || args.isShiftPressed) {

      args.cancel = true;

    }

  }

 


Sample: https://stackblitz.com/edit/react-ybhwvz?file=index.js


Please get back to us for further details.


Regards,

Joseph I.



SO sohyeonbak November 9, 2022 02:01 AM UTC

Hi,


your answer was good.

but that method makes to prevent multiple selection.

we needs multiple selection too

i need an extra method



JC Joseph Christ Nithin Issack Syncfusion Team November 15, 2022 03:01 PM UTC

Based on your requirement, you want to enable the multiple selection using the checkbox but want to cancel multiple selection using the ctrl or shift key. Your requirement can be achieved by using the created event where we have handled the key down and key up event when the enter or shift is pressed and using a flag variable we have canceled the selection when ctrl or shift is pressed.


Refer the below code example.


 

function rowSelecting(args) {

    if (this.isCtrlOrShiftPressed) {

      args.cancel = true;

    }

  }

  function created(args) {

    document.addEventListener('keydown', (e=> {

      if (e.ctrlKey || e.shiftKey) {

        this.isCtrlOrShiftPressed = true;

      }

    });

    document.addEventListener('keyup', (e=> {

      if (!e.ctrlKey || !e.shiftKey) {

        this.isCtrlOrShiftPressed = false;

      }

    });

  }

 


Sample: https://stackblitz.com/edit/react-ybhwvz-yze7bq?file=index.js



Loader.
Live Chat Icon For mobile
Up arrow icon