B4J Tutorial TableView Tutorial

Status
Not open for further replies.
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:

SS-2017-06-07_12.21.58.png


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

Attachments

  • TableExample.zip
    2.8 KB · Views: 3,562
Last edited:

electro179

Active Member
Licensed User
Longtime User
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

B4X:
    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
 

CHAUVET

Member
Licensed User
Longtime User
Hello Erel.
It's OK !

B4X:
Private pictoImage As ImageView
Private tableView1 As TableView

B4X:
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

Well-Known Member
Licensed User
Longtime User
Greetings.

Newbie question....

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

B4X:
For I =0 to Tableview1.NumberRows -1

Obviously, I missed a basic block...

Thank you for your help.

Sandy
 

raphipps2002

Active Member
Licensed User
Longtime User
If this selects a row

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

How can one DEselect a row?

:)
 

IslandMedic

Member
Licensed User
Longtime User
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.


B4X:
'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
 
Status
Not open for further replies.
Top