Adding line breaks in data grid row?

General
1

I would like to show multiple lines in a row in the data grid component -

I tried adding BRs, \n\r, and divs without any luck. It’s probably something simple that I’m missing.

Thanks,
Tim

2

Hi @Tim_Jones ,

Thank you for contacting us,
You can try using the following css properties to wrap a line in a cell:

overflow-wrap
white-space
word-break
line-break
hyphens

Regards,
Sergey

3

Hi @Sergey_Androsov,

Thanks for the help. I should have been more clear: I wanted to force a new line, not simply wrap the text. Will the CSS you provided allow for that, and if so, what do I use to add the new line (br, \n\r, etc.).

Thanks,
Tim

4

Hi @Tim_Jones

It might depends on several aspects: styles of the data-grid library, HTML elements, content, etc.

The best way is to open the page in the web browser, then open the browser dev tool and select the HTML element you would like to make with line-breaks and try to apply different CSS along with modifying the text in the element.

2024-08-14 11-21-35
2024-08-14 11-21-352730×1410 424 KB

Once you figure out how to archive your goal in the HTML we can help you with transferring these styles to the UIBuilder

Regards,
Vlad

5

@vladimir-upirov

Thank you for the suggestion; that is a great place to start. I’m getting stuck trying to modify the text. I added -

" <br> "

Instead of closing the string and adding the br element, it renders all the changes as text. I tried to follow the format in your example but it isn’t working.

image
image1560×771 79 KB

Thank you,
Tim

6

Hi @Tim_Jones

I see, actually, the component renders all values as text and it does not recognize any HTML tags because of security issues.

I just tried another option:

  1. save value in the DB with a new line using MultiLine Editor
  2. add CSS for the cell

and it appears it gets working

2024-08-20 11-17-56
2024-08-20 11-17-562002×1435 232 KB

2024-08-20 11-19-07
2024-08-20 11-19-072758×1536 441 KB

2024-08-20 11-17-21
2024-08-20 11-17-211920×970 195 KB

7

@vladimir-upirov

Thank you for taking the time to figure that out; I appreciate it. However, my data is coming from a hand-coded collection, not the DB.

I loop an object and build the row text. The object is used to map different company SKUs, and I also want to display the mapping in a data grid so the user understands what is happening behind the scenes -

image
image1093×491 44.7 KB

What is the character that gets returned in the data when the multi-line editor is used? Maybe I can add that to my code as a line break?

Tim

8

@Tim_Jones ,

Usually in multi-line editor \n character is used as line break character.

Regards, Andriy

9

Would I add that as raw text to the string passed to the data grid?

I think I tried \n and \n\r with no luck but I’ll try again.

Tim

10

yes, try with the RawText block

11

I added \n to the text and then added this CSS to the cell -

white-space: pre-wrap;

image
image755×89 3.66 KB

I have the content wrapping, but I can’t figure out how to make the row the right height. I’ve tried a bunch of things with no luck.

I’m not expecting you to help me, I’m just letting you know where I got to.

Tim

12

could you please provide your AppId/UIContainerName/UIPageName and I will take a look

13

Thank you for the offer @vladimir-upirov.

AppId: EEE25B20-17FA-97DD-FF29-EC45A5072A00
Container: portal_v1-5
Page Name: staffGAImport
Component: Data Grid-1245

14

it seems like the page requires logged in user