Adding buttons to every row of a table in Responsive.

Classic Servoy
1

Hi,

I’ve been working with the Responsive layout with a table (Servoy Extra Component) as the main bulk of the form. I was hoping to add buttons to each row of the table which would each open up a window displaying more information.

I’ve looked at putting some HTML into a Calculation and having the column get it’s data from there, but this just printed the HTML as a string.

I would appreciate any help on the matter, thanks, Thomas.

2

Hi Thomas

The table component in the servoy-extra repository doesn’t support additional markup.
Moreover, this component is meant for fast, read-only basic grid display.

You could do this in a regular table-view form.

But I wonder if you have tried some CSS on the column ? (see attached image)

Something like:

.table-button > div
{
	text-align: center;
	width: 80%;
	height: 25px;
	border-radius: 4px;
	background-color: #0080ff;
	color: #fff;
	cursor: pointer;
}
.table-button > div:HOVER
{
	border-radius: 4px;
	background-color: #66b3ff;
	color: #fff;
}

Then set your column styleClass or styleClassDataProvider property to table-button

Capture.PNG
Capture.PNG608×436 22.8 KB

3

Hi Sean,

Thanks for your help, I’ve tried what you suggested and it worked great!

I used some CSS and set the styleClassDataProvider property to the CSS which gave me the buttons I wanted.

Thanks again, Thomas.

4

Hi Thomas,

How do you set the styleClassDataProvider property to the CSS? I am using a form variable with the value table-button and is not working.

5

Hi Juan,

The most effective way to use the styleClassDataProvider may be to bind with a calculation.
Because then you really get a different value for potentially every record in the table.

If you are bound to a form variable, it won’t change per record.
In this case, you might as well just use the static property ‘styleClass’

6

Hi Sean,

The point is that I´ve tried to use the css you sent with a ServoyExtra Table column and it does not work. I tried with the StyleClass for the column and did not work and to use it with StyleClassDataprovider I used a form variable with the value table-button but did not work.

7

Sean,

It seems there is some problem with css. now I used a simple color attribute and worked fine. I will now work on defining the button.

Thank you!

8

Hi Juan,

What problem happens? You see no style change ?..or it doesn’t look right?

Can you confirm that the same CSS file is working on other elements ?
(i.e. it is not a problem that the stylesheet is not connected)

Also what happens when you inspect in browser (chrome) ?
What do you see for the cell ? Do you have any errors in the browser console ?

9

ah we posted at the same time - I missed your second reply :-D

10

Interesting. The problem was I just copied your css definition into my css file, and the editor did not recognized the properties inside the definition (shown in black). I finally found that editing them and removing the trailing spaces solve the problem (shown in purple into the editor).

I really enjoy learning something new every day :)