B4A Library Grid/Table and ListView Library

This library allows to create easely grids/tables and
from version 2.50
list views too!
Enjoy!
:)

The original post has been moved
http://www.b4x.com/android/forum/threads/grid-library.16381/page-10#post-168452"

Version 2.50 beta
- Added support for multiline rows

Version 2.51 beta
- Bug fixes

Version 2.52 beta
- Added Typeface support for rows and hedaer

Version 2.53
- Added SingleLine property for columns

sample code and usage hints can be found here
http://www.b4x.com/android/forum/threads/grid-library.16381/page-15#post-194602

Version 2.55
- Added object b4aActivityContext

Version 2.56
- Added and modified event hendlers
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-297198

Version 2.57
- Added Columns Builders
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-299406

Version 2.58
- Bug fixes

Version 2.59
- Added RowHeight for each column
- Added HeaderHeight for each column
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-304465

Version 2.60
- Added TouchX() and TouchY()
- Added FirstVisiblePosition() and LastVisiblePosition()
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-304905

Version 2.65
- Added Button Columns
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-306507

Version 2.67
- Added CellProps event
- Removed PropSetColor / PropSetTextColor
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-19#post-307490

Version 2.71
- Added OnSelectAllow event
- Added selection on row background
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-21#post-347618

Version 2.73
- Added OnRowProps event
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-21#post-349404

Version 2.76
- Fixed dubug log bug
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-21#post-375965

If you like my grid.
You can support the development.


 

Attachments

  • xnGridSample200beta.zip
    3.6 KB · Views: 2,184
  • xnGrid2xx_1.png
    xnGrid2xx_1.png
    77.2 KB · Views: 5,304
  • xnObjects267.zip
    75.7 KB · Views: 925
  • xnObjects272.zip
    87.2 KB · Views: 708
  • xnObjects273.zip
    87.5 KB · Views: 796
  • xnObjects276.zip
    87.2 KB · Views: 1,573
Last edited:

stefanobusetto

Active Member
Licensed User
Longtime User
Added the following event handlers:
  • Sub Grid_HeaderClick ( Col As Int )
  • Sub Grid_HeaderLongClick ( Col As Int )
  • Sub Grid_CellClick ( Col As Int , Row as Int )
  • Sub Grid_CellLongClick ( Col As Int , Row as Int )

The old ones:
  • Sub Grid_Select
  • Sub Grid_Long_Select
  • Sub Grid_Header_Click
will be removed so their use is discouraged.
:)
 

stefanobusetto

Active Member
Licensed User
Longtime User
Added Column Builders ( yust to keep the code easier! )
  • ColCreateAndAppend ( Caption As String , Field As String , Width As Int ) As xnGridCol
  • ColCreateAndAppend2 ( Caption As String , Field As String , Width As Int , Gravity As Int ) As xnGridCol
  • ColCreateAndInsert ( Col As Int , Caption As String , Field As String , Width As Int ) As xnGridCol
  • ColCreateAndInsert2 ( Col As Int , Caption As String , Field As String , Width As Int , Gravity As Int ) As xnGridCol
Each sub:
  1. Creates a new xnGridCol
  2. Adds the xnGridCol to the xnGrid
  3. Returns the xnGridCol
The following code ( from the xnGridSample4 example )
B4X:
Dim cc(5) As xnGridCol

cc(0).Initialize2 ( "#" , "id" , 40dip , Gravity.TOP + Gravity.LEFT )
gg.ColAppend ( cc(0) )

cc(1).Initialize2 ( "First Name" , "first_name" , 100dip , Gravity.TOP + Gravity.LEFT )
cc(1).SingleLine = True
gg.ColAppend ( cc(1) )

cc(2).Initialize2 ( "Family Name" , "family name" , 100dip , Gravity.TOP + Gravity.LEFT )
gg.ColAppend ( cc(2) )

cc(3).Initialize2 ( "State" , "state" , 40dip , Gravity.LEFT )
cc(3).SetTypeImage
cc(3).RowIconPut ( "1" , flags(0) )
cc(3).RowIconPut ( "2" , flags(1) )
cc(3).RowIconPut ( "3" , flags(2) )
cc(3).RowIconPut ( "4" , flags(3) )
cc(3).RowIconPut ( "5" , flags(4) )
cc(3).PositionSet ( 2 , 3 , 4 , 0 )
gg.ColAppend ( cc(3) )

cc(4).Initialize2 ( "Sex" , "sex" , 30dip , Gravity.LEFT )
cc(4).SetTypeImage
cc(4).RowIconPut ( "M" , bmp_m )
cc(4).RowIconPut ( "F" , bmp_f )
cc(4).PositionSet ( 2 , 3 , 2 , 7 )
gg.ColAppend ( cc(4) )

becomes
B4X:
Dim c As xnGridCol

c = gg.ColCreateAndAppend2 ( "#" , "id" , 40dip , Gravity.TOP + Gravity.LEFT )

c = gg.ColCreateAndAppend2 ( "First Name" , "first_name" , 100dip , Gravity.TOP + Gravity.LEFT )
c.SingleLine = True

c = gg.ColCreateAndAppend2 ( "Family Name" , "family name" , 100dip , Gravity.TOP + Gravity.LEFT )

c = gg.ColCreateAndAppend2 ( "State" , "state" , 40dip , Gravity.LEFT )
c.SetTypeImage
c.RowIconPut ( "1" , flags(0) )
c.RowIconPut ( "2" , flags(1) )
c.RowIconPut ( "3" , flags(2) )
c.RowIconPut ( "4" , flags(3) )
c.RowIconPut ( "5" , flags(4) )
c.PositionSet ( 2 , 3 , 4 , 0 )

c = gg.ColCreateAndAppend2 ( "Sex" , "sex" , 30dip , Gravity.LEFT )
c.SetTypeImage
c.RowIconPut ( "M" , bmp_m )
c.RowIconPut ( "F" , bmp_f )
c.PositionSet ( 2 , 3 , 2 , 7 )

:)
 

imgsimonebiliato

Well-Known Member
Licensed User
Longtime User
Hello @stefanobusetto,
I tried to use the method "SetTypeCheck", but it doesn't work as you explain in your example :confused:.
Can you check if everything is ok?
Thank you
 

imgsimonebiliato

Well-Known Member
Licensed User
Longtime User
Hello,
I have new ideas for your useful library:
- Some new methods like "GetValues", "GeValues2", "SetValues", "SetValues2",
Each method get, return the entire row values as a list or an array. The same for the method set.

- A new method, that incorporate and set at the same time HeaderTextSize, HeaderHeight, RowTextSize, RowHeight, such as:
B4X:
grid_cell_dimensions(HeaderTextSize as Int, HeaderHeight as Int, RowTextSize as Int, RowHeight as Int)

bye
 

stefanobusetto

Active Member
Licensed User
Longtime User
RowHeight and HeaderHeight can be used to set the Height of the celles of the grid.
As you can see in the image the "First Name" column height is double of the height of other columns.

B4X:
'Activity module
Sub Process_Globals
'These global variables will be declared once when the application starts.
'These variables can be accessed from all modules.
End Sub

Sub Globals
Dim gg As xnGrid

Dim bmp_m As Bitmap
Dim bmp_f As Bitmap
bmp_m.Initialize ( File.DirAssets , "male.png" )
bmp_f.Initialize ( File.DirAssets , "female.png" )

Dim flags(5) As Bitmap
flags(0).Initialize ( File.DirAssets , "flags_1.png" )
flags(1).Initialize ( File.DirAssets , "flags_2.png" )
flags(2).Initialize ( File.DirAssets , "flags_3.png" )
flags(3).Initialize ( File.DirAssets , "flags_4.png" )
flags(4).Initialize ( File.DirAssets , "flags_5.png" )

End Sub

Sub gg_fill
Dim n As Int

For n = 1 To 10
    gg.RowAppend ( Array As String ("1", "Fiona Fiona Fiona Fiona", "Stanfill", "1" , "F" ) )
    .....
Next
End Sub

Sub Activity_Create(FirstTime As Boolean)
Dim bt_paint As Button

Dim t As Int : t = 5dip
Dim h As Int : h = 45dip

' create buttons
bt_paint.Initialize("bt_paint")
bt_paint.Text = "create"
Activity.AddView ( bt_paint ,  0dip , t ,  90dip , 40dip )

t = t + h

' **************************************************************************
' create the grid object and then grid column objects
' **************************************************************************
If gg.IsInitialized = False Then
   gg.Initialize("gg")
   gg.FastScroll = False
 
   gg.RowHeight = 30dip
   gg.HeaderHeight = 30dip
 
   gg.HeaderTextSize = 13
   gg.RowTextSize = 13
 
   gg.HeaderTextColor = Colors.Black
   gg.RowTextColor = Colors.Black

   gg.SelectedOddColor = Colors.Magenta
   gg.SelectedEvenColor = Colors.Magenta

   Dim c As xnGridCol

   c = gg.ColCreateAndAppend2 ( "#" , "id" , 40dip , Gravity.TOP + Gravity.LEFT )

   c = gg.ColCreateAndAppend2 ( "First Name" , "first_name" , 100dip , Gravity.TOP + Gravity.LEFT )
   'c.SetTypeButton
   c.RowHeight = 60dip

   c = gg.ColCreateAndAppend2 ( "Family Name" , "family name" , 100dip , Gravity.TOP + Gravity.LEFT )

   c = gg.ColCreateAndAppend2 ( "State" , "state" , 50dip , Gravity.LEFT )
   c.RowIconTop = 2dip
   c.RowIconLeft = 2dip
   c.SetTypeImage
   c.RowIconPut ( "1" , flags(0) )
   c.RowIconPut ( "2" , flags(1) )
   c.RowIconPut ( "3" , flags(2) )
   c.RowIconPut ( "4" , flags(3) )
   c.RowIconPut ( "5" , flags(4) )
   c.PositionSet ( 2 , 3 , 1 , 1 )
    
   c = gg.ColCreateAndAppend2 ( "Sex" , "sex" , 50dip , Gravity.LEFT )
   c.RowIconTop = 2dip
   c.RowIconLeft = 2dip
   c.SetTypeImage
   c.RowIconPut ( "M" , bmp_m )
   c.RowIconPut ( "F" , bmp_f )
   c.PositionSet ( 2 , 3 , 3 , 1 )

   Activity.AddView ( gg , 5dip , t , 280dip , 100%y - t - 10dip )

   ' **************************************************************************
   ' fill the grid
   ' **************************************************************************
   gg_fill
   bt_paint_click
End If
End Sub

Sub bt_paint_click
gg.Multiselect = False
gg.GridWidth = 1dip
gg.RowEvenColor = Colors.RGB ( 240 , 255 , 255 )

gg.GridColor = Colors.Red
gg.PixelFix = False

gg.GridCreate2 ( True )
End Sub

gg.RowHeight = 30dip
sets the defaultheight of the cells

c.RowHeight = 60dip
sets the height of "First Name" cell

:)
 

Attachments

  • Screenshot_2015-01-04-18-36-33.png
    Screenshot_2015-01-04-18-36-33.png
    118.1 KB · Views: 397

stefanobusetto

Active Member
Licensed User
Longtime User
Sure i remember! :)
I'm adding some features i urgently need.
Then i'll have a look a t request #340
Then #356
:)
 

stefanobusetto

Active Member
Licensed User
Longtime User
TouchX() gets the x coordinate of the last touch point.
TouchY() gets the y coordinate of the last touch point.
FirstVisiblePosition() gets the index of the first visible ( even partially ) row
LastVisiblePosition() gets the index of the last visible ( even partially ) row

Example
B4X:
Log ( grid.TouchX )
Log ( grid.TouchY )

:)
 

stefanobusetto

Active Member
Licensed User
Longtime User
To create a Button Column just set the type with the SetTypeButton method.
The onClick event of the button is handled by the event onClick of the grid.

Example
B4X:
c = grid.ColCreateAndAppend2 ( "Button" , "Button" , 100dip , Gravity.TOP + Gravity.LEFT )
c.SetTypeButton

:)
 

stefanobusetto

Active Member
Licensed User
Longtime User
The CellProps event has replaced the PropSetColor / PropSetTextColor methods.
The CellProps event i triggered to get :
- BackGroundColor
- TextSize
- TextColor
of each cell of the grid.
So these properties can be set on a per cell basis instead of a per row basis
as it was previuosly.

Example
B4X:
Sub gg_CellProps ( aCol As Int , aRow As Int , aValue As String , aProps As xnGridCellProps )
If aCol = 1 Then
   aProps.TextColor = Colors.Red
End If

If aCol = 1 Then
   If aRow = 1 Then
      aProps.BackGroundColor = ...
      aProps.TextSize = ...
      aProps.TextColor = ...
   End If
End If
End Sub

:)
 

David Hawkins

Active Member
Licensed User
Longtime User
Hi Stefano

Thank you. This grids' functionality get better and better every day, brilliant, that is exactly what I wanted.

Regards

David
 

aviario

Active Member
Licensed User
Longtime User
Hi, I'm using the PropSetHeight property to change the height of the cells and I'm using xnobjets 2.52 I upgraded to version 2.67 and that property does not exist which is now the property

Thank You
 

stefanobusetto

Active Member
Licensed User
Longtime User
You have to keep using version 2.52.
PropSetHeight is the only feature i've not yet ported to 2.67.
I'm sorry you'll have to wait a bit.
:)
 

David Hawkins

Active Member
Licensed User
Longtime User
Hi Stefano in the statement below what is the aValue as string representing? is it the value to put into the cell?

Sub gg_CellProps ( aCol As Int , aRow As Int , aValue As String , aProps As xnGridCellProps )

Regards

David
 

imgsimonebiliato

Well-Known Member
Licensed User
Longtime User
Hi Stefano in the statement below what is the aValue as string representing? is it the value to put into the cell?

Sub gg_CellProps ( aCol As Int , aRow As Int , aValue As String , aProps As xnGridCellProps )

Regards

David
It is the value that each cells contains
 

David Hawkins

Active Member
Licensed User
Longtime User
Hi imgsimonebiliato

In that case i am getting confused with the code for setting the cell back color.

I am trying to make sense of the following code to set a cell back color as posted by Stefano

Sub gg_CellProps ( aCol As Int , aRow As Int , aValue AsString , aProps As xnGridCellProps )
If aCol = 1 Then
aProps.TextColor = Colors.Red
EndIf
If aCol = 1Then
If aRow = 1Then
aProps.BackGroundColor = ...
aProps.TextSize = ...
aProps.TextColor = ...
EndIf
EndIf
End Sub
 
Top