Cell Text Selectable with Row Selection Mode

Cell Text Selectable with Row Selection Mode

Posted by: jmisquez on 22 September 2022, 6:28 am EST

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 22 September 2022, 6:28 am EST - Updated 3 October 2022, 2:41 am EST

  I want to be able to select text with Row Selection Mode, is that possible?, the user should be able to highlight the row when click it, but also be able to select the text in the cells as you can see in the screenshot

  Desired result:
  
  

  

  918×110 6.59 KB

  (this screenshot comes from legacy code, we want to replicate the table functionality with Wijmo Flexgrid)

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 23 September 2022, 12:04 am EST

  Hello,

  First, you’ll need to remove the default handler of ‘selectstart’ event from the flexGrid. Then, you can use the following CSS configuration, to make the text selectable -

  
  .wj-flexgrid{
    user-select: auto !important;
  }
  .wj-flexgrid ::selection{
    background-color: orange;
  }
  
  

  Also, to copy the selected text you may add a keydown event listener on FlexGrid’s hostElement, prevent the default behavior, and copy the selected text. You can update the behavior to copy selected text or entire row data as per your requirement.

  Please refer to this sample link implementing the same: https://stackblitz.com/edit/js-jxnkso?file=index.js

  Regards

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 23 September 2022, 12:53 am EST

  Hello,

  Looks like i can select the text but i cannot copy only the selected text, i get the entire row copied, is there a way to only copy the text that has been selected?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 25 September 2022, 3:06 pm EST

  Hi,

  We apologize, you may use the below-attached sample link which provides copy functionality for the selected text:

  https://stackblitz.com/edit/js-hukfta?file=index.js

  In the above sample link, we have added a keydown event listener on FlexGrid’s cells hostElement, prevent the default behavior, and copy the selected text. You can update the behavior to copy selected text or entire row data as per your requirement.

  Please let us know if you still face any issues.

  Regards