Cell Text Selectable with Row Selection Mode

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

  • Posted 22 September 2022, 6:28 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:


    (this screenshot comes from legacy code, we want to replicate the table functionality with Wijmo Flexgrid)
  • Replied 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
  • Replied 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?
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels