0

I need some help in removing Wrap Text/Clip Text options for tree grid. enter image description here

I need to do it at least for Name column. The reason of that is that for some long names wrap option isn't working as expected - it's exceeded cell like below:

enter image description here

I didn't found the reason why is that happening, so I decided to remove these options as they're not required in my project.

Initially when I was working on that in datatable I used hideDefaultActions: "true" for the column and it was working, but for tree-grid it not.

I tried add hideDefaultActions: "true" in the table declaration, tried CSS described here: https://developer.salesforce.com/forums/?id=9060G0000005emkQAA but they're seem to be working only for datatable.

Does anyone know how we can hide/remove these options?

Thanks!

5
  • I'm also having this problem. Please let me know if you've find a solution.
    – Andegosu
    Commented Feb 11, 2022 at 8:12
  • Hi @Andegosu Yes, I found the solution! The lightning-tree-grid I wrapped in additional div and next in CSS file I applied styles to this div. See my updated post. Commented Feb 21, 2022 at 8:22
  • @Tom2341 Please, add your solution as an answer here (not as an update to the question), you can accept your own answer as well. It will help people searching for solution to find it the easiest way possible. Commented Feb 21, 2022 at 9:13
  • For anyone struggling with this issue, I solved it by below: lightning-tree-grid wrap by additional div and apply below CSS formatting. Table from HTML: <div class ="wrapword"> <lightning-tree-grid columns={columns} data={myData} key-field="Id" hide-checkbox-column="true" ></lightning-tree-grid> </div> Commented Feb 21, 2022 at 14:44
  • Applied CSS formatting: .wrapword{ white-space: -moz-pre-wrap !important; /*Mozilla, since 1999*/ white-space: -webkit-pre-wrap; /*Chrome and Safari / white-space: -pre-wrap; /*Opera 4-6*/ white-space: -o-pre-wrap; /*Opera 7*/ white-space: pre-wrap; / css-3 */ word-wrap: break-word; /*Internet Explorer 5.5+ */ word-break: break-all; white-space: normal; } Hope that helps! Commented Feb 21, 2022 at 14:45

1 Answer 1

0

we need to do this using custom CSS and follow the below approach using static resource

step 1 -> Create a custom CSS file enter image description here

step 2 -> Upload this file in static resource enter image description here

step 3 -> Now in js make a render call like below enter image description here

HTML code enter image description here

For any further Query

Linkedin Id -> www.linkedin.com/in/manishmanghnani/

1
  • 1
    Pasting screenshots of code is generally discouraged, because the code can't be copy/pasted and search engines face difficulties with images. The LinkedIn link points to your person and appears therefore like self promotion. For any further query I'd recommend the comments. Finally, I'm missing some cautionary remarks regarding the proposed solution, because couldn't this stop working anytime, if Salesforce chooses to use another class?! Commented Mar 28 at 11:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .