cancel
Showing results for 
Search instead for 
Did you mean: 

How to add icons/checkboxes to the first column in TreeTable?

Former Member
0 Kudos

Hi,

I have this TreeTable:

http://jsbin.com/gobogihezu/1/edit?html,output

As you can see in the example, I only define one column while the the other is created automatically by the control.

Is there any way I can add checkboxes to this column that is used for selecting rows? (expected result in the picture below).

Accepted Solutions (1)

Accepted Solutions (1)

Qualiture
Active Contributor
0 Kudos

According to the documentation, a TreeTable

[...] provides the same functionality as the Table control and adds the possibility for an hierachical tree view in the first column.


(emphasis mine)

So the first column will always be the expandable tree item. But you can of course make the TreeTable multiselect, which has the same effect as checkboxes

Former Member
0 Kudos

Hi Robin,

Thank you for the answer, but it's still not 100% clear for me. Is there any way to put checkboxes in that first column that TreeTable creates?

Thanks,

Radu

ChrisSolomon
Active Contributor
0 Kudos

Robin answered it....a TreeTable has the same functionality as the Table control (for which you can set it's " getSelectionMode" to "mult row" and get the "checkboxes" and you can set "EnableSelectAll" which puts the nice "select all" checkbox up in the top left corner).....what he is saying is that the first column ....after your row-selector checkbox.....will then ALWAYS have to be the "tree".


So yes...you can do it.

Former Member
0 Kudos

Thank you, Cristopher, useful info, I managed to get the functionality going.

I can click cell #1 and select the whole row.

I can click the top-left corner for the "Select All" functionality.

Progress so far:

JS Bin - Collaborative JavaScript Debugging

But I still have these two problems:

     1. How can I get the checkboxes showing (they work, as I mentioned above, but they don't show, the first column is empty)

    

     2. How can I replace the "Select All" icon with a different one?

    

Thanks again for your replies.

karthikarjun
Active Contributor
Former Member
0 Kudos

Thank you for your response, Karthik, but what I am after is putting checkboxes inside the first column. In the example you provided, the first column "works", but visually, it's empty. Any chance you have an example with actual, classical checkboxes, please?

ChrisSolomon
Active Contributor
0 Kudos

"In the example you provided, the first column "works", but visually, it's empty."

What do you mean "empty"? It clearly has checkboxes that you "check" to select the row. What are you missing from that?

Former Member
0 Kudos

Thank you, it works now! My Explored app was set to High Contrast and it definitely didn't have the checkboxes. As soon as I set it to Blue Crystal it worked!

Thanks again, everybody!

ChrisSolomon
Active Contributor
0 Kudos

Not following you....your JS Bin example already had it set as Blue Crystal but is not working as you wanted. What did you change?

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.table, sap.ui.commons"></script>

Former Member
0 Kudos

I have no idea what happened, I can't replicate it, but it's working now so thank you!

Answers (0)