B4J Library [B4X] [XUI] SD FlexGrid (Table)

I created a new library to show a table (or grid) similar to the one in EXCEL.

There are already excellent classes that allow many to accomplish things, such as xCustomListView by @Erel (B4X) and with the FlexibleTable by @klaus (B4A). I wanted to make something slightly different suited to my needs.

WARNING
The use of libraries for personal and / or commercial use is permitted. It is not allowed to modify the sources or change the name of the library. Reverse engineering is not authorized to access the sources for any reason, not even for study or learning reasons.

Explanations:

1. To get the calculation of the cells that contain a formula I have added Erel's B4XEval to my Library, but as soon as possible I will make it external so that everyone can modify it according to their needs.
2. To select multiple cells, position yourself on the first cell of those to be selected (the one at the top left) click a shot and then click again and drag your finger to cover all the cells (or area) that you want to select
3. It is still in beta version, presents problems in large grids.
4. Now only for B4A and B4i Now for B4A,B4i,B4j
5. In the example to select a group of cells just long click on a cell (not checkbox). In the case of B4J click with the right mouse button

SD_FlexGrid

Author: Star-Dust
Version: 0.45

• Eval
  version 2.00
  Eval Method By Erel: https://www.b4x.com/android/forum/threads/b4x-eval-expressions-evaluator.54629/
  • Fields:
    • Error As Boolean
  • Functions:
    • Calculate (Expression As String) As Double
    • Class_Globals As String
    • Initialize (FG As FlexGrid) As String
    • IsInitialized As Boolean
      Verifica se l'oggetto sia stato inizializzato.
• FlexGrid
  • Events:
    • CellClick (Row As Int, Col As Int)
    • CellLongClick (Row As Int, Col As Int)
    • FeetClick (Index As Int)
    • HeadClick (Index As Int)
    • Modified (Row As Int, Col As Int)
    • ScrollX (Position As Double)
    • ScrollY (Position As Double)
  • Fields:
    • EditBackgroundColor As Int
    • EditTextColor As Int
    • TypeButton As Int
    • TypeCheck As Int
    • TypeDouble As Int
    • TypeFloat As Int
    • TypeImage As Int
    • TypeInt As Int
    • TypeList As Int
    • TypeString As Int
  • Functions:
    • AddRow (Cell As Object(), Refresh As Boolean) As String
      eg. Flexgrid.AddRow(Array As Object(i,B,"User ","Description " ,100.00), True)
    • AddRow2 (Cell As Object(), HeightRow As Int, Refresh As Boolean) As String
      eg. Flexgrid.AddRow(Array As Object(i,B,"User ","Description " ,100.00),40dip,True)
    • AddRowAt (index As Int, Cell As Object(), Refresh As Boolean) As String
      eg. Flexgrid.AddRow(2,Array As Object(i,B,"User ","Description " ,100.00), True)
    • AddRowCustomize (Cell As Object(), Text_Color As Int, Background_Color As Int, TextFont As B4XFont, Refresh As Boolean) As String
    • AddToParent (Parent As B4XView, Left As Int, Top As Int, Width As Int, Height As Int, ColsNumber As Int) As String
      Parent is Panel to Add Grid
      eg. Flexgrid.AddToParent(Activity,0,0,100%x,100%y,5)
    • Class_Globals As String
    • ClearRows As String
      erase all rows contents
    • ClearSelection As String
      cell no longer be selected.
    • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
      Base type must be Object
    • EditCell (Row As Int, Col As Int) As String
      eg. Flexgrid.EditCell(1,1)
    • EditCellOnSite (Row As Int, Col As Int) As String
      eg. Flexgrid.EditCell(1,1)
    • GetCellBackgroundColor (Row As Int, Col As Int) As Int
    • GetCellCol (Col As Int) As Object()
      eg. Dim S() as String = Flexgrid.GetCellCol(1)
      eg. Dim B() as Boolean = Flexgrid.GetCellCol(2)
    • GetCellRow (Row As Int) As Object()
      eg Dim Row() as Object = Flexgrid.GetCellRow(1)
    • GetCellTextColor (Row As Int, Col As Int) As Int
    • GetCellTextFont (Row As Int, Col As Int) As B4XFont
    • GetCellValue (Row As Int, Col As Int) As Object
      eg. Dim I as int = Flexgrid.GetCellValue(1,1)
      eg. Dim S as String = FlexGrid.GetCellValue(2,2)
    • GetTypeCol (Col As Int) As Int
      eg. If Flexgrid.GetTypeCol(1)=Flexgrid.TypeInt Then .....
    • Initialize (Callback As Object, EventName As String) As String
    • Invalidate As String
    • IsInitialized As Boolean
      Verifica se l'oggetto sia stato inizializzato.
    • RemoveRow (Row As Int) As String
      Row (0...n-1)
      eg. Flexgrid.RemoveRow(1)
    • ResetCustomizeCell (Col As Int, Row As Int) As String
      eg. Flexgrid.ResetCustomizeCell(1,1)
    • SearchInColumn (Text As String, Col As Int, FromRow As Int, exactly As Boolean, IgnoreCap As Boolean) As Int
      Search for text in the indicated column starting from the start row.
      If the start row is 0 it will check the entire column.
      It will return the position of the line containing the text
      <code>Dim Col As Int = 5
      Dim Row As Int = FlexGied1.SearchInColumn("My text",Col,0, False, True)
      if Row>-1 then Log("Find in row " & Row) Else log("Don't find")
      </code>
    • SearchInColumn2 (Text As String, Col As Int, FromRow As Int, exactly As Boolean, IgnoreCap As Boolean) As List
      Search for text in the indicated column starting from the start row.
      If the start row is 0 it will check the entire column.
      It will return the list of position of the line containing the text
      <code>Dim Col As Int = 5
      Dim IndexFinded As List = FlexGied1.SearchInColumn2("My text",Col,0, False, True)
      if IndexFinded.Size>0 then Log("Find in row " & Row) Else log("Don't find")
      </code>
    • SelectCell (Row As Int, Col As Int, Mobile As Boolean) As String
      eg. Flexgrid.SelectCell(1,1,True)
      If Mobile is True, the selectable area can be enlarged by touching and dragging it to the desired box.
    • SelectCells (FromRow As Int, FromCol As Int, ToRow As Int, ToCol As Int, Mobile As Boolean) As String
      eg. Flexgrid.SelectCell(1,1,5,4,True)
      If Mobile is True, the selectable area can be enlarged by touching and dragging it to the desired box.
    • SelectCol (Col As Int) As String
      eg. Flexgrid.SelectCol(1)
    • SelectRow (Row As Int) As String
      eg. Flexgrid.SelectRow(1)
    • SetCellCustomize (Row As Int, Col As Int, Text_Color As Int, Background_Color As Int, TextFont As B4XFont) As String
      eg. Flexgrid.SetCellCustomize(1,1,XUI.Color_Black,XUI.Color_White,XUi.CreateDefaultFont(12))
    • SetCellListIndex (Row As Int, Col As Int, Index As Int) As String
    • SetCellValue (Row As Int, Col As Int, Value As Object) As String
      eg. Flexgrid.SetCellValue(1,1,True)
      eg. Flexgrid.SetCellValue(2,2,"OK")
      eg. Flexgrid.SetCellValue(3,3,3)
      eg. Flexgrid.SetCellValue(Row,Col,"A,B,C,D,E") for TypeList
    • SetColAlignment (ColumnIndex As Int, Alignment As String) As String
      Index (0..n-1)
      eg. SetColAlignment(0,"CENTER")
    • SetColCustomize (Col As Int, Text_Color As Int, Background_Color As Int, TextFont As B4XFont) As String
      eg. Flexgrid.SetColCistomize(1,XUI.Color_Black,XUI.Color_White,XUi.CreateDefaultFont(12))
    • SetColName (ColumnIndex As Int, Name As String) As String
      Index (0..n-1)
      eg. Flexgrid.SetColName(1,"Help")
    • SetColsNumber (ColumnNumber As Int) As String
      Reset Grid and Change Cols Number
    • SetColType (ColumnIndex As Int, Typ As Int) As String
      Index (0..n-1)
      eg. SetColType(0,FlexGrid.TypeInt)
    • SetColWidth (ColumnIndex As Int, Width As Int) As String
      Index (0..n-1)
      eg. SetColWidth(0,100dip)
    • SetDataRow (Row As Int, Cell As Object()) As String
      eg. Flexgrid.SetRow(Row,Array As Object(i,B,"User ","Description " ,100.00))
    • SetDataRow2 (Row As Int, Cell As Object(), HeightRow As Int) As String
      eg. Flexgrid.SetRow2(Row,Array As Object(i,B,"User ","Description " ,100.00),40dip)
    • SetFeetHeight (Height As Int) As String
      Set Header Height
    • setFootColValue (col As Int, Fv As String) As String
      eg. Flexgrid.FeetValue=array As String ("First","Second")
    • setHeaderAlignment (Col As Int, Alignment As String) As String
      eg. Flexgrid.HeaderAlignment="CENTER"
    • SetHeadHeight (Height As Int) As String
      Set Header Height
    • SetPadding (Left As Int, Top As Int, Right As Int, Bottom As Int) As String
      eg. FlexGrid1.SetPadding(10dip,0,10dip,0)
    • SetRowCustomize (Row As Int, Text_Color As Int, Background_Color As Int, TextFont As B4XFont) As String
      eg. Flexgrid.SetRowCustomize(1,XUI.Color_Black,XUI.Color_White,XUi.CreateDefaultFont(12))
    • SetRowHeight (IndexRow As Int, Height As Int) As String
      IndexRow (0..Size-1)
      eg. setRowHeight(0,60dip)
    • SetRowsHeight (Height As Int) As String
      Set all Rows Height
    • SetSingleLine (SLine As Boolean) As String
      To set the cells to single or multiple lines
    • SortForCol (Column As Int) As String
  • Properties:
    • Base As B4XView [read only]
    • ColCount As Int [read only]
    • ColorSelectedArea
      Set the color of the selected area
    • ColorSelectingArea
      Set the color of the area during the selection phase
    • ColsAlignment
      eg. setColsAlignment(Array As String ("LEFT","CENTER","CENTER","RIGHT"))
    • ColsName As String()
      eg. Flexgrid.ColName=array As String ("First","Second")
    • ColsType
      eg. ColsType=Array As Int(FlexGrid1.TypeInt,FlexGrid1.TypeCheck,FlexGrid1.TypeString,FlexGrid1.TypeString,FlexGrid1.TypeFloat)
    • ColsWidth
      eg. SetColsWìdth(Array As Int (100dip,50dip,100dip,100dip))
    • Font
      eg. Flexgrid.Font=xui.CreateDefaultFont(12)
    • FootFont
      eg. Flexgrid.FeetFont=xui.CreateDefaultFont(12)
    • FootValue As String()
      eg. Flexgrid.FeetValue=array As String ("First","Second")
    • FootVisible
      eg. FG.FeetVisible=True
    • HeaderFont
      eg. Flexgrid.HeaderFont=xui.CreateDefaultFont(12)
    • HeaderVisible
      eg. FG.HeadVisible=True
    • Height As Int
    • RowCount As Int [read only]
      Dim Size as int = Flexgrid.RowCount
    • ScrollToCol
      eg. Flexgrid.ScroolToCol=50 (Col= 0..Size-1)
    • ScrollToRow
      eg. Flexgrid.ScroolToRow=50 (Row= 0..Size-1)
    • ScrollX As Double
    • ScrollY As Double
    • SelectedColumnEnd As Int [read only]
      return -1 if not selected
    • SelectedColumnStart As Int [read only]
      return -1 if not selected
    • SelectedRowEnd As Int [read only]
      return -1 if not selected
    • SelectedRowStart As Int [read only]
      return -1 if not selected
    • Width As Int

List/Spinner

For more details: https://www.b4x.com/android/forum/threads/xui-flexgrid.98686/

Significative release logs:

• 0.12
  • Add method SelectCells (FromRow As Int, FromCol As Int, ToRow As Int, ToCol As Int, Mobile As Boolean)
  • Modify method SelectCell (Row As Int, Col As Int, Mobile As Boolean)
• 0.15: Added HeaderFont
• 0.16: Added SetColsNumber method.
• 0.19 (Sample)
  • Add method AddRowCustomize (Cell As Object()
  • Add method SearchInColumn (Text As String, Col As Int, FromRow As Int, exactly As Boolean, IgnoreCap As Boolean) As Int
• 0.21
  • Add TypeList. Allows you to add a ComboBox type box (Spinner in B4A and Picker in B4i) and select to a list
  • Added other examples to POST n. 2 To populate the grid from the database, search for a string in a column and to use TypeList in the grid
  • added SetCellListIndex method to change the position of the selected index
• 0.25
  • Added SetHeadHeight method
    sets the height of the header
  • Added SetRowsHeight method
    sets the height of all lines
• 0.27
  • added properties ScrollX and ScrollY
  • Added events ScrollX() and ScrollY()
• 0.29: Fixed bugs in vertical scrolling
• 0.31
  • Added SortForCol(Column As Int)
  • Added SetDataRow(Row As Int, Cell() As Object) and SetDataRow2(Row As Int, Cell() As Object, HeightRow As Int)
  • Added field ColorSelectedArea and ColorSelectingArea
  • Fix bug
• 0.32
  • Added SearchInColumn2. Returns the list of search result lines
• 0.33
  • Added setHeaderAlignment
• 0.34
  • Added the ability to freeze the last row (foot row) as well as the header so you can enter column totals that always remain visible
  • Fix minor bugs
• 0.35
  • Added the ability to select from Design that text cells are single or multiline
• 0.36
  • Fix bugs: SortForCol; SetColsNumber
• 0.37
  • Added: EditTextColor and EditBackgroundColor fields to be able to select colors for the on-site editable cell. By default it is black background and white text
• 0.38
  • Fixed bug on CheckBox alignment
• 0.39
  • Singleline and multiline option of the design now also affects the column header and column foot
• 0.40
  • Added ScrollToCol (together with ScrollToRow it is possible to position in a specific cell)
• 0.41
  • Fix bug
• 0.42
  • Added Width and Height to change the size of the grid from code during execution
• 0.43
  • Fixed bug on SearchInColumn2
• 0.44
  • Added SetSingleLine - To set the cells to single or multiple lines
• 0.45
  • Added SetPadding

 

[Sabotto]

only this:

FlexGrid1.SetCellCustomize (r, c, xui.Color_Green, xui.Color_Yellow, xui.CreateDefaultBoldFont (16))

I have tryed

for i = 0 to 100
     FlexGrid1.SetCellCustomize(i,3,xui.Color_Blue,xui.Color_Yellow,xui.CreateDefaultBoldFont(16))
next i

Sub FlexGrid1_CellClick(Row As Int, Col As Int)
   Select FlexGrid1.GetTypeCol(Col)
   Case FlexGrid1.TypeCheck
      Dim B As Boolean = FlexGrid1.GetCellValue(Row,Col)
          
      If B Then
          FlexGrid1.SetCellCustomize(Row,3,xui.Color_Red,FlexGrid1.GetCellBackgroundColor(Row,Col),FlexGrid1.GetCellTextFont(Row,Col))
      Else
          FlexGrid1.SetCellCustomize(Row,3,xui.Color_Blue,FlexGrid1.GetCellBackgroundColor(Row,Col),FlexGrid1.GetCellTextFont(Row,Col))
      End If

but GetCellBackgroundColor does not return the code of xui.Color_Yellow. What is it for then?

 

[Sabotto]

I would have found another small bug. But give me confirmation if you like me to point them out or not. I don't want to bother you. In practice, if I choose to select the entire row, every time I touch any cell, at the second touch on the same cell, instead of making only that row remain selected, it also selects the one immediately below.

Sub FlexGrid1_CellClick(Row As Int, Col As Int)
   
    FlexGrid1.SelectRow(Row)
   
    'if I double click on the same cell,
    'the right row and the one below are selected (two rows!)
   
    Select FlexGrid1.GetTypeCol(Col)
        Case FlexGrid1.TypeInt
            Dim I As String = FlexGrid1.GetCellValue(Row,Col)
            Log("Cell content: " & I)

furthermore by selecting the entire row, if I click on a checkbox, the second click (the check should reappear) is no longer taken into consideration and the check no longer appears

 

[Star-Dust]

I have tryed

for i = 0 to 100
     FlexGrid1.SetCellCustomize(i,3,xui.Color_Blue,xui.Color_Yellow,xui.CreateDefaultBoldFont(16))
next i

Sub FlexGrid1_CellClick(Row As Int, Col As Int)
   Select FlexGrid1.GetTypeCol(Col)
   Case FlexGrid1.TypeCheck
      Dim B As Boolean = FlexGrid1.GetCellValue(Row,Col)
        
      If B Then
          FlexGrid1.SetCellCustomize(Row,3,xui.Color_Red,FlexGrid1.GetCellBackgroundColor(Row,Col),FlexGrid1.GetCellTextFont(Row,Col))
      Else
          FlexGrid1.SetCellCustomize(Row,3,xui.Color_Blue,FlexGrid1.GetCellBackgroundColor(Row,Col),FlexGrid1.GetCellTextFont(Row,Col))
      End If

but GetCellBackgroundColor does not return the code of xui.Color_Yellow. What is it for then?

It works for me. I used this code

    FlexGrid1.SetCellCustomize(0,3,xui.Color_Black,xui.Color_Cyan,xui.CreateDefaultBoldFont(16))
    For I=0 To 9
        FlexGrid1.SetCellCustomize(i,1,xui.Color_Blue,xui.Color_Yellow,xui.CreateDefaultBoldFont(16))
    Next
   
    LogColor("Color" ,FlexGrid1.GetCellBackgroundColor(1,1))

Here is the result

 

[Star-Dust]

I would have found another small bug. But give me confirmation if you like me to point them out or not. I don't want to bother you. In practice, if I choose to select the entire row, every time I touch any cell, at the second touch on the same cell, instead of making only that row remain selected, it also selects the one immediately below.

Sub FlexGrid1_CellClick(Row As Int, Col As Int)
  
    FlexGrid1.SelectRow(Row)
  
    'if I double click on the same cell,
    'the right row and the one below are selected (two rows!)
  
    Select FlexGrid1.GetTypeCol(Col)
        Case FlexGrid1.TypeInt
            Dim I As String = FlexGrid1.GetCellValue(Row,Col)
            Log("Cell content: " & I)

furthermore by selecting the entire row, if I click on a checkbox, the second click (the check should reappear) is no longer taken into consideration and the check no longer appears

It works for me. Make sure you are not using ActiveCheckBox, it is no longer needed in version 0.09

Obviously, until it completes the display of the views it does not enable events.

 

[Sabotto]

As soon as you have time, take a look at this simple example.
I added a line of code to make sure that when I click on a checkbox, it changes the color of the text of the beside cell (column 1) If true: red; if false: blue.
But it doesn't keep the background color!

Also with each tap, I would like the entire row to be selected.
But if you de-COMMENT the instruction

FlexGrid1.SelectRow (Row)

you will see that after clicking on a checkbox, if you click again on the same checkbox, not only does the checkbox no longer react, but two lines are selected.

 

[Star-Dust]

As soon as you have time, take a look at this simple example.
I added a line of code to make sure that when I click on a checkbox, it changes the color of the text of the beside cell (column 1) If true: red; if false: blue.
But it doesn't keep the background color!

Dear friend,

You made a programming mistake. The color retains it, only you are transferring the background color of the wrong box.

Replace this

If B Then
    FlexGrid1.SetCellCustomize(Row,1,xui.Color_Red,FlexGrid1.GetCellBackgroundColor(Row,Col),xui.CreateDefaultBoldFont(16))
Else
    FlexGrid1.SetCellCustomize(Row,1,xui.Color_Blue,FlexGrid1.GetCellBackgroundColor(Row,Col),xui.CreateDefaultBoldFont(16))
End If

with this

If B Then
    FlexGrid1.SetCellCustomize(Row,1,xui.Color_Red,FlexGrid1.GetCellBackgroundColor(Row,1),xui.CreateDefaultBoldFont(16))
Else
    FlexGrid1.SetCellCustomize(Row,1,xui.Color_Blue,FlexGrid1.GetCellBackgroundColor(Row,1),xui.CreateDefaultBoldFont(16))
End If

I used your source code, with the fix mentioned

 

[Star-Dust]

But if you de-COMMENT the instruction

FlexGrid1.SelectRow (Row)

you will see that after clicking on a checkbox, if you click again on the same checkbox, not only does the checkbox no longer react, but two lines are selected.

Dear friend,

Here in my opinion you are making a mistake of use.

 

[Sabotto]

quite right. I apologize for the distraction. Regards the selection of the row, I do want select the row not the column (as in your gif)
Tap only on a single cell.
The row is selected and is ok
Another tap on the same cell, select the next row!
Is normal?
thanks for your time

 

[Star-Dust]

quite right. I apologize for the distraction. Regards the selection of the row, I do want select the row not the column (as in your gif)
Tap only on a single cell.
The row is selected and is ok
Another tap on the same cell, select the next row!
Is normal?
thanks for your time

I have done several tests, it is not something that always happens. It is probably related to some aspects related to compatibility with iOs. It will be fixed in the next update

 

[Star-Dust]

Update 0.11

​

 

[Sabotto]

Great. There remains only the problem that when there is a selected line the checkbox does not respond to the tap. Work for a next update!

 

[Star-Dust]

Update 0.12

• Add method SelectCells (FromRow As Int, FromCol As Int, ToRow As Int, ToCol As Int, Mobile As Boolean)
  If Mobile is True, the selectable area can be enlarged by touching and dragging it to the desired box.
• Modify method SelectCell (Row As Int, Col As Int, Mobile As Boolean); Add Mobile parameter
• Fix Bugs
• Update Example

 

[LucaMs]

1. Now only for B4A and B4i

iSD_FlexGrid

This is B4J libraries thread. Is the new version for B4A and B4i only? And its name iSD_FlexGrid? ?

 

[Star-Dust]

This is B4J libraries thread. Is the new version for B4A and B4i only? And its name iSD_FlexGrid? ?

As it is a B4X library, it fits anywhere on the forum.
In any case, one day I will also add B4J .... I think

 

[Sabotto]

Good! update also included the resolution of the checkbox bug. Thank you

 

[Star-Dust]

After two and a half years, i Added B4J version still in beta phase. Cell selection is not functional

 

[Star-Dust]

Update rel. 0.13

1. Added cell selection also in B4J
2. Improved selection visibility. When the selection is activated and it is still editable, the selection frame will be surrounded by a red border.

 

[BigBoss123]

Hi
Having a problem with this code

Private Sub btnClear_Click
    FlexGrid1.ClearSelection
    txtBarcode.Text = " "
    txtCustomer.Text = " "
    txtCategory.Text = "  "
    txtWine.Text = "  "
    txtDest.Text = " "
    txtWare.text = " "
    
End Sub

The Flexgrid is not being cleared. This is running on B4A

Thanks for your help

 

[Star-Dust]

Hi
Having a problem with this code

Private Sub btnClear_Click
    FlexGrid1.ClearSelection
    txtBarcode.Text = " "
    txtCustomer.Text = " "
    txtCategory.Text = "  "
    txtWine.Text = "  "
    txtDest.Text = " "
    txtWare.text = " "
   
End Sub

The Flexgrid is not being cleared. This is running on B4A

Thanks for your help

This command is used to reset the selection. This does not mean that it deletes the contained data, but that the previously selected data will no longer be selected.

 

[BigBoss123]

Ok. . . . so how do I delete the data on the screen?