How to add a button to a table with scaladin?

I’m trying to add a button to each row in a table. I’ve tried two different approaches with different results.

One gets me a table with the correct number of rows but all the cells are empty.

The second populates the table correctly except for the button column where what shows is the button class name.

class InsightsManager extends VerticalLayout {

val logger = LoggerFactory.getLogger(“InsightsManager”)

val userTable = new Table
spacing_=(true)
init
loadUsers

def init() = {
addComponent(userTable)

userTable.caption_=(“Insight Users”)
userTable.addContainerProperty(“Context”, classOf[String]
, None)
userTable.addContainerProperty(“Login”, classOf[String]
, None)
userTable.addContainerProperty(“Email”, classOf[String]
, None)
userTable.addContainerProperty(“First Name”, classOf[String]
, None)
userTable.addContainerProperty(“Last Name”, classOf[String]
, None)
userTable.addContainerProperty(“Query Language”, classOf[String]
, None)
userTable.addContainerProperty(“Interface Language”, classOf[String]
, None)
userTable.addContainerProperty(“Role”, classOf[Button]
, None)

userTable.sort(Array(“Context”, “Login”), Array(true, true))

}

def loadUsers() = {
val users = DataServices.getUsers()
var i = 1

users.foreach(u => {
val btn = new Button()
btn.caption_=(“Show Role”)
btn.data_=(u.role)

/* val add = userTable.addItem(Array[Object]
(
u.context,
u.login,
u.email,
u.firstName,
u.lastName,
u.queryLanguage,
u.interfaceLanguage,
btn),i)

logger.info(“addRes:{}”,add)*/

val rowItem = userTable.addItem(i).get
rowItem.getProperty(“Context”).value_=(u.context)
rowItem.getProperty(“Login”).value_=(u.login)
rowItem.getProperty(“Email”).value_=(u.email)
rowItem.getProperty(“First Name”).value_=(u.firstName)
rowItem.getProperty(“Last Name”).value_=(u.lastName)
rowItem.getProperty(“Query Language”).value_=(u.queryLanguage)
rowItem.getProperty(“Interface Language”).value_=(u.interfaceLanguage)
rowItem.getProperty(“Role”).value_=(btn)

i += 1

})
}

In load users - when I use the commented section I get an empty table.

When I run it as is I get a populated table but with the class name instead of a button.

What is the correct way to add a button to a table with scaladin?

I’m using vaadin 7.6.4 and scaladin 3.1.0

I don’t know Scaladin, but your code looks pretty odd compared to what the docu says: https://vaadin.com/docs/-/part/framework/components/components-table.html

Are you referring to the scala syntax or the order of operations?

Hi Matthias,

I am not sure if forums removed some text from you code, but this looks wrong:
userTable.addContainerProperty("Role", classOf, None) I think you should say:
userTable.addContainerProperty("Role", classOf[Button] , None)
Thanks,

-Henri

Henri,

yes the forum or the pasting removed it they are all classOf[String]
except for Role which is classOf[Button]
.

But all I get is the tostring of the instance instead of the button in the table.

Matthias

Hi, could try to use a code block so that your code would be more readable. Now many characters are missing so hard to spot your problem.

sorry - lets try that again:

userTable.addContainerProperty(“Context”, classOf[String]
, None)
userTable.addContainerProperty(“Login”, classOf[String]
, None)
userTable.addContainerProperty(“Email”, classOf[String]
, None)
userTable.addContainerProperty(“First Name”, classOf[String]
, None)
userTable.addContainerProperty(“Last Name”, classOf[String]
, None)
userTable.addContainerProperty(“Query Language”, classOf[String]
, None)
userTable.addContainerProperty(“Interface Language”, classOf[String]
, None)
userTable.addContainerProperty(“Role”, classOf[Button]
, None)

didn’t work either - or I’m not clear on how to use the code block button.

userTable.addContainerProperty(“Context”, classOf[String]
, None)
userTable.addContainerProperty(“Login”, classOf[String]
, None)
userTable.addContainerProperty(“Email”, classOf[String]
, None)
userTable.addContainerProperty(“First Name”, classOf[String]
, None)
userTable.addContainerProperty(“Last Name”, classOf[String]
, None)
userTable.addContainerProperty(“Query Language”, classOf[String]
, None)
userTable.addContainerProperty(“Interface Language”, classOf[String]
, None)
userTable.addContainerProperty(“Role”, classOf[Button]
, None)

This is silly - how should I add source code to a post?

I’ve selected the code I’ve pasted and clicked the source button.

I’ve clicked the source button and pasted

in both cases the [ content ]
disappear.

userTable.addContainerProperty(“Context”, classOf[ String ]
, None)
userTable.addContainerProperty(“Login”, classOf[ String ]
, None)
userTable.addContainerProperty(“Email”, classOf[ String ]
, None)
userTable.addContainerProperty(“First Name”, classOf[ String ]
, None)
userTable.addContainerProperty(“Last Name”, classOf[ String ]
, None)
userTable.addContainerProperty(“Query Language”, classOf[ String ]
, None)
userTable.addContainerProperty(“Interface Language”, classOf[ String ]
, None)
userTable.addContainerProperty(“Role”, classOf[ Button ]
, None)

this is what the code looks like.

Found a way that worked.

set the container Property like this:
userTable.addContainerProperty(“Role”, classOf[ com.vaadin.ui.Button ]
, None)

and add the button like this:
val btn = new Button // this is a scala.vaadin.Button - but the .p refers to the wrapped com.vaadin.ui.Button
rowItem.getProperty(“Role”).value_=(btn.p)

Something like this may also work for straight scala/Vaadin - haven’t tried yet.