Grid

Description

The Grid control is used to display data in a table. To add a Grid to your app, choose the Grid icon in the Toolbar. Use the Property Editor to set the properties.

The onclick event can be used to check for clicks. Check event.target.id to find out which cell was clicked.

The width of the grid is set to the total of the pixel widths of the columns, if supplied. Otherwise, it is full width.

If you set the style of the grid to ‘table-layout:fixed;’ it will force the able to maintain cell widths. If the data is too big, it will overflow to the next cell, as in Excel.

If you change the size of a control with scrolling enabled at runtime (by doing addCols or deleteRows, etc.), you need to recalulate the size of the scrolling area by doing controlname.refresh(). This also applies if you load a new form with a Grid on it. The width may also need to be set. A good place to do this is in the onshow() function of the new form.

 Grid1.refresh()
 Grid1.width="90%"

To add a control to your app, choose the control’s icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the control: usually, just onclick.

Each cell in the grid has its own id, in the form gridId_x_y. The id of the top left element of Grid1 is Grid1_0_0.

To make a row column combination bold, do the following:

 Grid1.cell(1,0).style.fontWeight = "bold"

To align a row column combination, do the following:

 Grid1.cell(1,0).style.textAlign = "right"

To put an image in a grid cell, do the following:

 Grid1.setValue(0,1,"<img src='mario.jpg' id='Grid1_0_1'>")

The 0_1 in the ID should have the same column and row as the first two arguments.

To scroll to the top of the grid (row 1), do the following:

 Grid1_ref.scrollTo(0, 0)

Useful Methods (Basic)

' center align records in a grid Function GridCenterAlign(grdName,startCol,endCol)

   Dim grdRows
   grdRows = grdName.getRowCount()
   For i = 1 To grdRows - 1
     For col = startCol To endCol
       grdName.cell(i,col).style.textAlign = "center"
     Next
   Next

End Function

' right align columns in a grid Function GridRightAlign(grdName,startCol,endCol)

   Dim grdRows
   grdRows = grdName.getRowCount()
   For i = 1 To grdRows - 1
     For col = startCol To endCol
       grdName.cell(i,col).style.textAlign = "right"
     Next
   Next

End Function

' set the heigh of a grid row Function SetGridHeight(grdName,grdRowHeight)

 Dim grdRows
 grdRows = grdName.getRowCount()
 For i = 1 To grdRows - 1
   grdName.setRowHeight(i, grdRowHeight)
 Next

End Function

Function BoldGridRow(grdName,rowPos)

 Dim grdCols
 grdCols = grdName.getColCount()
 For i = 0 To grdCols - 1
   grdName.cell(rowPos,i).style.fontWeight = "bold"
 Next

End Function

' draw alternate colors in the grid Function AlternateGridColor(grdName)

 'Paints Each row in alernating color.
 Dim grdRows, grdCols
 grdRows = grdName.getRowCount()
 grdCols = grdName.getColCount()
 For i = 1 To grdRows - 1
   For col = 0 To grdCols - 1
     If (Abs(i) % 2) = 1 Then
       grdName.cell(i,col).style.backgroundColor = RGB(255,255,240)
     Else
       grdName.cell(i,col).style.backgroundColor = RGB(240,248,255)
     End If
   Next
 Next

End Function

Properties and Methods

Standard properties are supported, plus:

addCols(n)	Add n columns to the right of the table. Default is 1.
addRows(n)	Adds n rows to the end of the table. Default is 1.
alignments	The alignment of the data in each column. Can be left, right, center, justify or char=”.”. Optional. (Design time only)
cell(row, col)	Returns a reference to cell x,y.
cellstyle	The style of each cell in the grid. Use cell(x,y).style at runtime.
cols	The number of columns in the table. (Design time only)
colwidths	The width of each column, in pixels (100px), comma separated. Design time only.
deleteCols(n)	Deletes n columns from the right of the table. Default is 1.
deleteRows(n)	Delete n rows from the end of the table. Default is 1.
getColCount()	Returns the number of columns.
getRowCount()	Returns the number of rows.
getValue(row,col)	Get the current value of a cell.
rowheights	The height of each row, in pixels (20px) or percentages (20%), comma separated. Read only at runtime.
refresh()	Recalculate the scrolling area after additions or deletions. Used for scrolling grids only.
rows	The number of rows in the table. (Design time only)
scroll_options	This control makes use of iScroll. It has a number of options, including: bounce: true/false. When the end of the scroll area is reached, should the image bounce? zoom: true/false. Allow two finger zoom in gesture? The full list of options is documented here: http://cubiq.org/iscroll-4
scrolling	Allow choices in the menu to scroll? On or off. (design time)
setColumnWidth(col, width)	Sets the width of col to width. Needs to be done to all columns to be effective.
setRowHeight(row, height)	Sets the height of row to height.
setValue(row, col, value)	Set the value of a cell. Can be string or HTML.
titles	The titles for each column, comma separated. Optional. (Design time only)

Events

Grid supports the standard events.

Example 1 (Basic)

For row=0 to 3
  For col=0 to 3
    Grid1.setValue(row,col,row*col)
  Next
Next
 
Function Button1_onclick()
  MsgBox "Grid(3,3)=" & Grid1.getValue(3,3)
End Function
 
Function Grid1_onclick()
  s=Split(event.target.id, "_")
  MsgBox "Click on " & s(0) & " at row " & s(1) & " and column " & s(2)
  MsgBox "Value is " & Grid1.getValue(s(1),s(2))
End Function

Set the color of a cell:

  Grid1.cell(1,1).style.backgroundColor="red"

Example 1 (JavaScript)

for(row=0; row <= 3; row++) {
  for(col=0; col <= 3; col++) {
    Grid1.setValue(row,col,row*col);
  }
}

Button1.onclick = function() {
  alert("Grid[3,3]=" + Grid1.getValue(3,3));
}

Grid1.onclick = function() {
  s=Split(event.target.id, "_");
  alert("Click on " + s[0] +  " at row " +  s[1] + " and column " +  s[2]);
  alert("Value is " + Grid1.getValue(s[1] ,s[2]));
}

Set the color of a cell:

  Grid1.cell[1,1].style.backgroundColor="red";

Example 2 (Basic)

This sample code will add 100 rows to a grid with 4 columns and it will alternate the row colors.

Grid1.setRowHeight(0, "40px")
 'Add 100 rows with 4 cols to the grid.
 For row=1 To 100
   Grid1.addRows(1)
   Grid1.setRowHeight(row, "32px")
   For col=0 To 3
     If col = 0 Then
         Grid1.setValue(row,col,"Row " + row)
     Else
         Grid1.setValue(row,col,row*col)
     End If
     'Paints each row in alernating color.
     If (Abs(row) % 2) = 1 Then
       Grid1.cell(row,col).style.backgroundColor = RGB(255,255,240)
     Else
       Grid1.cell(row,col).style.backgroundColor = RGB(240,248,255)
     End If
   Next
 Next
 Grid1.refresh()

Example 2 (JavaScript)

This sample code will add 100 rows to a grid with 4 columns and it will alternate the row colors.

  
  Grid1.setRowHeight(0, "40px");
  //Add 100 rows with 4 cols to the grid.
  for(row=1; row <= 100; row++) {
    Grid1.addRows(1);
    Grid1.setRowHeight(row, "32px");
    for(col=0; col <= 3; col++) {
      if(col == 0) {
        Grid1.setValue(row,col,"Row " + row);
      } else {
        Grid1.setValue(row,col,row*col);
      }
      //Paints each row in alernating color.
      if((Math.abs(row) % 2) == 1) {
        Grid1.cell(row,col).style.backgroundColor = RGB(255,255,240);
      } else {
        Grid1.cell(row,col).style.backgroundColor = RGB(240,248,255);
      }
    }
  }
  Grid1.refresh();

Setting Grid Font (JavaScript)

$("#Grid1 td").css("font-family", "Courier New") 

Setting Grid Font (BASIC)

For i = 0 To Grid1.children[0].children.length - 1
  For j = 0 To Grid1.children[0].children[i].children.length - 1
    Grid1.children[0].children[i].children[j].style.fontFamily="Courier new"
  Next
Next

Output