B4J Tutorial TableView Tutorial

Erel · Dec 10, 2013

TableView is useful to show data in a tabular view.

The data is held in a List. Each item in this list is an array of objects. The length of each array equals to the number of colums.

For example to fill a table with three columns with some random data we can use this code:

B4X:

TableView1.SetColumns(Array As String("Column 1", "Column 2", "Column 3"))
For i = 1 To 1000
Dim Row() As Object = Array ("a", "b", "c")
TableView1.Items.Add(Row)
Next

TableView can also accept Nodes as items. In this case the nodes will be displayed inside the cells.
By adding nodes as items you can fully customize the TableView appearance.

Another advantage of nodes is that they can be easily updated. The attached example creates a table with two columns. The second column can be updated:

DBUtils.ExecuteTableView fills a TableView from a SQLite database. It should be simple to change the code to other DBs.

imbault · Jan 10, 2014

Erel, please, how to catch a doubleclick, getting the row and rowid (index) as well as in the _selectRowChanged event ?

Erel · Jan 10, 2014

You can add labels instead of strings and then handle the labels MouseClicked event to handle double clicks.

You can add the row id to the label's tag.

imbault · Jan 13, 2014

Thanks Erel, Labels are fine, except the column sort doesn't work on such columns...

Patrick

coyote · Feb 9, 2014

Hi Patrick & Erel, how can I handle the double click event for labels?
I've insert some rows with labels but I don't know how to catch the events.
Could you give me an example?

Coyote

Erel · Feb 10, 2014

You should handle the labels MouseClicked event. Then call EventData.ClickCount to find the number of clicks.

coyote · Feb 10, 2014

OK, I think, I've got it.
Erel, do you think that's ok?
Or should I do change something?

B4X:

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private tv1 As TableView
    Private lbl As Label
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.RootPane.LoadLayout("1")
    MainForm.Show
    MainForm.Title = "Test"
    tv1.SetColumns(Array As String("Col1", "Col2"))
       
    For i = 1 To 5
        Dim row(2) As Object
        row(0) = "Row No." & i
        lbl.Initialize("label")
        lbl.Text = "Label " & i
        lbl.Tag = i
        row(1) = lbl
        tv1.Items.Add(row)
    Next
    tv1.SetColumnSortable(1, False)
    tv1.SetColumnWidth(1,200)
End Sub
Sub label_MouseClicked (EventData As MouseEvent)
    If EventData.ClickCount = 2 Then
        Log("Label :" & lbl.Tag)
    End If
End Sub

Coyote

Erel · Feb 11, 2014

1. Add Dim lbl As Label to the For loop.
2. Use Sender in the event to get a reference to the correct label.

coyote · Feb 11, 2014

You mean, I should do it like this?

Loop:

B4X:

For i = 1 To 5
        Dim row(2) As Object
        row(0) = "Row No." & i
        dim lbl As Label
        lbl.Initialize("label")
        lbl.Text = "Label " & i
        lbl.Tag = i
        row(1) = lbl
        tv1.Items.Add(row)
    Next

Mouse Click:

B4X:

Sub label_MouseClicked (EventData As MouseEvent)
    Dim lbl As Label
    lbl = Sender
    If EventData.ClickCount = 2 Then
        Log("Label :" & lbl.Tag )
    End If
End Sub

Coyote

imbault · Feb 11, 2014

Yep Coyote, it should work properly (double-click on your 2nd column)

coyote · Feb 11, 2014

Ok, that sounds good.
But now, I wonder how it works with label.tooltiptext?

This is not working:

B4X:

Sub label_MouseMoved (EventData As MouseEvent)
    Dim lbl As Label
    lbl = Sender
    Dim x As String = "Label :" & lbl.Tag
    lbl.TooltipText = x
End Sub

In x is the correct value but the tooltip doesn't appear.

Coyote

imbault · Feb 11, 2014

Your code is correct, after a click on 2nd column. put the cursor on the cell, and you should see the tooltip.

Patrick

coyote · Feb 12, 2014

Unfortunately, it doesn't work.
The mouse cursor is over the label but nothing happens.
When I insert

B4X:

tv1.TooltipText = x

the tooltip appears but it's for the whole table and does not appear when the mouse is over the label.

Coyote

driesvp · Apr 26, 2014

Is there a property like "rowcount" to determine how many rows are present?

Dries

Erel · Apr 27, 2014

B4X:

Log(tv1.Items.Size)

tcgoh · Jun 11, 2014

Hi,

Is there a way or code to set the rows NOT to have alternate color ? ie, all cells in "white" color only.

Thanks

Erel · Jun 11, 2014

Create a css file with this content (table.css):

B4X:

.table-row-cell:odd {
  -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
  -fx-background-insets: 0, 0 0 1 0;
}

.table-row-cell:focused:odd {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  -fx-background-insets: 0, 1, 2;
}

.table-view:focused .table-row-cell:filled:focused:selected {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  -fx-background-insets: 0, 1, 2;
  -fx-background: -fx-accent;
  -fx-text-fill: -fx-selection-bar-text;
}

Load it with:

B4X:

MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "table.css"))

It is a slightly modified version of the default style: http://pastebin.com/0PebD9nR

Note that there is an issue with the hovering color not showing on odd rows. You can probably fix it by adding one of the other attributes.

tcgoh · Jun 13, 2014

Hi Erel,

Thanks for the code, its work like a gem. Just a addition request, is it possible to change the "white" base color to any other color?

I tried adding these on top of your code in css file,
.table1 {
-fx-background-color:blue;
}

but it only change the color on the edge of the table.

Many Thanks

Erel · Jun 15, 2014

Try to replace -fx-table-cell-border-color with blue.

tcgoh · Jun 17, 2014

Thanks. Its work with these code

B4X:

.table-row-cell {
  -fx-background-color:lightgrey;
-fx-table-cell-border-color:black;
-fx-background-insets: 0, 2 , -5;
}

.table-row-cell:odd {
  -fx-background-color:lightgrey;
-fx-table-cell-border-color:black;
  -fx-background-insets: 0, 2 2 1 -2,15;
}

.table-row-cell:focused:odd {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
  -fx-background-insets: 0, 5, 2;
}

.table-view:focused .table-row-cell:filled:focused:selected {
  -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
  -fx-background-insets: 0, 5, 5;
  -fx-background: -fx-accent;
  -fx-text-fill: -fx-selection-bar-text;
}

B4J Tutorial TableView Tutorial

Attachments

Well-Known Member

B4X founder

Well-Known Member

Member

B4X founder

Member

B4X founder

Member

Well-Known Member

Member

Well-Known Member

Member

Member

B4X founder

Active Member

B4X founder

Active Member

B4X founder

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency