Display shortened text while exporting full text

  • Resolved Mihkel Roomet

    (@mihkelroomet)


    1 year, 6 months ago

    After having manually set a max length to displayed data in a cell using a custom javascript function, I’ve noticed that the text is cut short in exported files as well.

    Is there any simple way to make it export the full data, while still displaying max 50 chars per cell? Maybe it would be possible to truncate the text like this instead? This capture is from the WPDA Data Explorer.

    If not, I guess I would have to duplicate the columns that tend to have longer text, shorten the text on one copy and make it have higher display priority. This way data could still be viewed okay (there are enough columns that the ones with longer text would not appear unless the user explicitly selects to remove a bunch of others) and there would be some garbage in the output, but it’s not difficult to remove it from CSV or XLSX. Still, would be nice if there was a more convenient alternative.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi @mihkelroomet

    Thank you for reaching out!

    When you truncate the text with javascript, the text is gone after truncation and can no longer be exported. The Data Explorer solution works because the export performs its own queries on the server. If you want to truncate content in the browser and maintain the output in your export, you can use plain CSS.

    Here is a great article where this is explained in depth. It basically gives you the same result as the Data Explorer, without truncating the content so your full content will be available in your export:
    https://benmarshall.me/css-limit-text-length/

    Hope this helps! Feel free to reopen this thread or open a new one.

    Best regards,
    Peter

    Thread Starter Mihkel Roomet

    (@mihkelroomet)

    Thank you! I just happened to stumble upon a similar solution myself as you were writing this. Here’s my solution in case anyone looking for the same thing is interested:

    Under Advanced Options I have the following line in every entry inside “columns”:

    "render": "function(data, type, row, meta) { return truncateText(data); }"

    Here’s the Javascript function I’m running on my page:

    function truncateText(text) { return '<div class="my_custom_class"' + text + '</div>' }

    And here’s the custom CSS I’m running:

    .my_custom_class {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

    The line clamp determines the amount of lines displayed.

    Plugin Contributor Kim L

    (@kimmyx)

    Hi @mihkelroomet,

    Thank you so much for sharing your solution!

    Feel free to let us know if you have more questions. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Display shortened text while exporting full text’ is closed to new replies.

Tags