B4J Tutorial TableView Tutorial

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:

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.

 

[electro179]

Hi

can I add col with scene builder and not use items.add(array.......)

I used with only scene builder but it does not work

    Dim row(6) As Object
  
    row(0) = "TEST 1"
    row(1) = "TEST 1"
    row(2) = "TEST 1"
    row(3) = "TEST 1"
    row(4) = "TEST 1"
    row(5) = "TEST 1"
    TableView_cabinet.Items.Add(row)

all line is empty


thank you

 

[Erel]

No. You need to add the columns with TableView.SetColumns.

 

[CHAUVET]

hello,

In a tableView how can we add an image in a cell?

thank you,

 

[Erel]

The code here adds labels as the items: https://www.b4x.com/android/forum/threads/tableview-tutorial.35542/#post-222413

You can add ImageViews with images or you can add Panes with other nodes.

 

[CHAUVET]

Hello Erel.
It's OK !

Private pictoImage As ImageView
Private tableView1 As TableView

Dim img_http As Image
img_http.Initialize(File.DirAssets,"http.png")
             
Dim row(2) As Object
pictoImage.Initialize("ImageView")
pictoImage.SetImage(img_http)
             
row(0) = pictoImage
row(1) = "File -> http.png"

tableView1.Items.Add(row)

 

[tdocs2]

Greetings.

Newbie question....

I could not find a Member for Number_of_Rows in the Tableview. For example,

For I =0 to Tableview1.NumberRows -1

Obviously, I missed a basic block...

Thank you for your help.

Sandy

 

[Roycefer]

Use

For i = 0 to Tableview1.Items.Size-1
'.....

 

[tdocs2]

Use

For i = 0 to Tableview1.Items.Size-1
'.....

Me - NEWBIE!!!!!!!!!!!!!!!

Thank you, Roycefer.

Sandy

 

[Erel]

Another option:

For Each row() As Object in TableView.Items

Next

 

[raphipps2002]

If this selects a row

jo.RunMethodJO("getSelectionModel",Null).RunMethod("select",Array(j))

How can one DEselect a row?

 

[Erel]

You can call clearSelection instead of select.

 

[IslandMedic]

I want to use a table view for showing incoming message from the server. It seems like a good tool to use, has alot of formatting controls etc all built in. Here is my code and here arey questions.

'setup the table view for messaging 
    OpTableView1.SetColumns(Array As String("Time","Sender","Message"))
    OpTableView1.SetColumnSortable(0,True)  'can sort by time
    OpTableView1.SetColumnSortable(1,True)  'can sort by sender
    OpTableView1.SetColumnSortable(2,False)  'cannot sort by message
    OpTableView1.SetColumnWidth(0,60) 'fixes the time column width.
    OpTableView1.SetColumnWidth(0,100) 'fixes the time column width.

Public Sub WriteMsg(msg As String,from As String)
    Dim row(3) As Object
    row(0) = DateTime.Time(DateTime.Now)
    row(1) = from
    row(2) = msg
       
    'add the new items
    OpTableView1.Items.Add(row)
   'sort the time column to put the newest message at the top.
   
End Sub

1. I want the new message to be at the top of the view. I know I can sort the column by clicking on the header, but can I do it in code? So what I would do is insert the row and then get it to sort by time for the user so the newest message is always at the top.

2. I only want to have three columns, so doing this OpTableView1.SetColumnVisible(3) etc doesn't seem practical, how would I just have three?

3. the third column it would be nice to have the size of it be the remaining percentage of the table view window.

thanks in advance,

Brad

 

[Erel]

Please start a new thread for these questions.

 

[Erel]

The example in the first thread was updated. The layout is now done with the internal designer. All the cells are made of labels and there are helper methods to make it simple to get and set the cells values.