Grid: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
 
(33 intermediate revisions by 2 users not shown)
Line 3: Line 3:
== Description ==
== 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 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. It is based on the HTML Table element.


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


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.
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)


== Properties and Methods ==
== Properties and Methods ==
Line 55: Line 34:
| cell(''row'', ''col'') || Returns a reference to cell x,y.
| 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.
| cellstyle || The style of each cell in the grid. Use cell(x,y).style at runtime. Set at Design Time, can be read at runtime.
|-
|-
| cols || The number of columns in the table. (Design time only)  
| 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.
| colwidths || The width of each column, in pixels (100px), comma separated. Set at Design Time. At runtime, shows the original setting.
|-
|-
| deleteCols(''n'') || Deletes ''n'' columns from the right of the table. Default is 1.
| deleteCols(''n'') || Deletes ''n'' columns from the right of the table. Default is 1.
Line 70: Line 49:
|-
|-
| getValue(''row'',''col'') || Get the current value of a cell.
| getValue(''row'',''col'') || Get the current value of a cell.
|-
| init(''row'',''col'') || Recreates an empty grid with specified ''rows'' and ''cols'' at runtime. First row is a heading.
|-
|-
| rowheights || The height of each row, in pixels (20px) or percentages (20%), comma separated. Read only at runtime.
| rowheights || The height of each row, in pixels (20px) or percentages (20%), comma separated. Read only at runtime.
Line 83: Line 64:
zoom: true/false. Allow two finger zoom in gesture?
zoom: true/false. Allow two finger zoom in gesture?


The full list of options is documented here: http://cubiq.org/iscroll-4
The full list of options is documented here: https://github.com/cubiq/iscroll
|-
|-
| scrolling || Allow choices in the menu to scroll? On or off. (design time)
| scrolling || Allow choices in the menu to scroll? On or off. (design time)
Line 98: Line 79:
== Events ==
== Events ==


Grid supports the standard [[events|events]].
Grid supports the standard [[events|events]], plus
 
{| class="wikitable"
|-
| onclick || Returns the ID of the cell clicked in event.target.id
|}


== Example 1 (Basic) ==
== Examples ==


=== Load Grid - BASIC ===
<pre>
<pre>
For row=0 to 3
For row=0 to 3
Line 113: Line 100:
End Function
End Function
   
   
Function Grid1_onclick()
Function Grid1_onclick(event)
   s=Split(event.target.id, "_")
   s=Split(event.target.id, "_")
   MsgBox "Click on " & s(0) & " at row " & s(1) & " and column " & s(2)
   MsgBox "Click on " & s(0) & " at row " & s(1) & " and column " & s(2)
Line 120: Line 107:
</pre>
</pre>


Set the color of a cell:
=== Load Grid (JavaScript) ===
<pre>
  Grid1.cell(1,1).style.backgroundColor="red"
</pre>
 
== Example 1 (JavaScript) ==
<pre>
<pre>
for(row=0; row <= 3; row++) {
for(row=0; row <= 3; row++) {
Line 137: Line 119:
}
}


Grid1.onclick = function() {
Grid1.onclick = function(event) {
   s=Split(event.target.id, "_");
   s=Split(event.target.id, "_");
   alert("Click on " + s[0] +  " at row " +  s[1] + " and column " +  s[2]);
   alert("Click on " + s[0] +  " at row " +  s[1] + " and column " +  s[2]);
Line 144: Line 126:
</pre>
</pre>


Set the color of a cell:
<pre>
  Grid1.cell[1,1].style.backgroundColor="red";
</pre>


== Example 2 (Basic) ==
===  More complex Grid (Basic) ===
This sample code will add 100 rows to a grid with 4 columns and it will alternate the row colors.
This sample code will add 100 rows to a grid with 4 columns and it will alternate the row colors.
<pre>
<pre>
Line 174: Line 152:
</pre>
</pre>


== Some more useful code (BASIC) ==
=== More complex Grid (JavaScript) ===
This sample code will add 100 rows to a grid with 4 columns and it will alternate the row colors.
<pre> 
  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();
</pre>
 
== Some more useful code ==
 
=== Setting Grid Font and Size ===
<pre>
$("#Grid1 td").css("font-family", "Courier New")
$("#Grid1 td").css("font-size", "100%")
</pre>
 
=== Setting Grid Font (BASIC) ===
<pre>
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
</pre>
 
=== Center align records in a grid ===
<pre>
<pre>
' center align records in a grid
Function GridCenterAlign(grdName,startCol,endCol)
Function GridCenterAlign(grdName,startCol,endCol)
     Dim grdRows
     Dim grdRows
Line 186: Line 205:
     Next
     Next
End Function  
End Function  
</pre>


' right align columns in a grid
=== Right align records in a grid ===
<pre>
Function GridRightAlign(grdName,startCol,endCol)
Function GridRightAlign(grdName,startCol,endCol)
     Dim grdRows
     Dim grdRows
Line 197: Line 218:
     Next
     Next
End Function  
End Function  
</pre>


' set the heigh of a grid row
=== Set the height of a grid row ===
<pre>
Function SetGridHeight(grdName,grdRowHeight)
Function SetGridHeight(grdName,grdRowHeight)
   Dim grdRows
   Dim grdRows
Line 206: Line 229:
   Next
   Next
End Function  
End Function  
</pre>


=== Make a grid row bold ===
<pre>
Function BoldGridRow(grdName,rowPos)
Function BoldGridRow(grdName,rowPos)
   Dim grdCols
   Dim grdCols
Line 214: Line 240:
   Next
   Next
End Function  
End Function  
</pre>


' draw alternate colors in the grid
=== Draw alternate colors in the grid ===
<pre>
Function AlternateGridColor(grdName)
Function AlternateGridColor(grdName)
   'Paints Each row in alernating color.
   'Paints Each row in alernating color.
Line 233: Line 261:
</pre>
</pre>


 
=== Set the color of a cell ===
== Example 2 (JavaScript) ==
<pre>
This sample code will add 100 rows to a grid with 4 columns and it will alternate the row colors.
   Grid1.cell(1,1).style.backgroundColor="red"
<pre>
   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();
</pre>
</pre>


== Setting Grid Font (JavaScript) ==
=== Set the color of the header row ===
<pre>
<pre>
$("#Grid1 td").css("font-family", "Courier New")  
  $("#Grid1 th").css("background", "#FF6600")
</pre>
</pre>


== Setting Grid Font (BASIC) ==
=== Make a row column combination bold ===
<pre>
 
For i = 0 To Grid1.children[0].children.length - 1
  Grid1.cell(1,0).style.fontWeight = "bold"
  For j = 0 To Grid1.children[0].children[i].children.length - 1
 
    Grid1.children[0].children[i].children[j].style.fontFamily="Courier new"
=== Align a row column combination ===
   Next
 
Next
  Grid1.cell(1,0).style.textAlign = "right"
</pre>
 
=== Put an image in a grid cell ===
 
  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.
 
=== Scroll to the top of the grid (row 1) ===
 
  Grid1_ref.scrollTo(0, 0)
 
=== Make a grid scrollable horizontally ===
 
Add this to scroll_options:
 
  scrollX: true, freeScroll: true,
 
Do the following in Sub Main() or after adding data to the grid:
 
  Grid1.refresh()
 
=== Hide Grid lines ===
 
Add this to cellStyle:
 
  border-style:none;
 
To hide the outside border of a Grid, add this to Style:
 
  border-style:none;
 
=== Change color of grid lines ===
 
  border=color:red;
 
=== Make the grid's columns fixed width with no overflow ===
 
Put this into the grid's style property:
 
  table-layout:fixed;
 
Put this into the grid's cellstyle property:
 
  overflow:hidden;white-space:nowrap;
 
=== Get Grid's height at runtime ===
 
  actualHeight = Grid1_scroller.offsetHeight
  scrollAreaHeight = Grid1.offsetHeight
 
=== Get width of a column at runtime ===
 
  Grid1.cell(0,1).offsetWidth  'width of column 1
 
=== Test to see if a grid cell is empty ===
 
Grid cells are initialized with a value of &amp;nbsp; (so they don't collapse). To test for this:
 
  If GridCart.getValue(n,1) = "&amp;nbsp;" Then 
 
=== Get the current scroll position ===
 
Grid uses the [http://iscrolljs.com/#scroller-info iScroll] library for scrolling. The iScroll functions are in Grid1_ref, where Grid1 is the name of your grid.
 
  Grid1_ref.x      'current horizontal position
  Grid1_ref.y      'current vertical position
  Grid1_ref.directionX/Y  'last direction (-1 down/right, 0 still, 1 up/left)
  Grid1_ref.currentPage  'current snap point info
 
=== Scrolling Events ===
 
Grid uses the [http://iscrolljs.com/#scroller-info iScroll] library for scrolling. The iScroll functions are in Grid1_ref, where Grid1 is the name of your grid. The following events can be used:
 
* beforeScrollStart, executed as soon as user touches the screen but before the scrolling has initiated.
* scrollCancel, scroll initiated but didn't happen.
* scrollStart, the scroll started.
* scrollEnd, content stopped scrolling.
* flick, user flicked left/right.
* zoomStart, user started zooming.
* zoomEnd, zoom ended.
 
  Grid1_ref.on('scrollEnd', scrollEnd)
 
  Function scrollEnd()
    console.log("Scrolling ended")
   End Function


== Output ==
== Output ==

Latest revision as of 19:02, 19 January 2020

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. It is based on the HTML Table element.

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.

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. Set at Design Time, can be read at runtime.
cols The number of columns in the table. (Design time only)
colwidths The width of each column, in pixels (100px), comma separated. Set at Design Time. At runtime, shows the original setting.
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.
init(row,col) Recreates an empty grid with specified rows and cols at runtime. First row is a heading.
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: https://github.com/cubiq/iscroll

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, plus

onclick Returns the ID of the cell clicked in event.target.id

Examples

Load Grid - 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(event)
  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

Load Grid (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(event) {
  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]));
}


More complex Grid (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()

More complex Grid (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();

Some more useful code

Setting Grid Font and Size

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

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

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 records 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 height 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 

Make a grid row bold

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

Set the color of a cell

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

Set the color of the header row

  $("#Grid1 th").css("background", "#FF6600")

Make a row column combination bold

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

Align a row column combination

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

Put an image in a grid cell

 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.

Scroll to the top of the grid (row 1)

 Grid1_ref.scrollTo(0, 0)

Make a grid scrollable horizontally

Add this to scroll_options:

 scrollX: true, freeScroll: true, 

Do the following in Sub Main() or after adding data to the grid:

 Grid1.refresh()

Hide Grid lines

Add this to cellStyle:

 border-style:none;

To hide the outside border of a Grid, add this to Style:

 border-style:none;

Change color of grid lines

 border=color:red;

Make the grid's columns fixed width with no overflow

Put this into the grid's style property:

 table-layout:fixed;

Put this into the grid's cellstyle property:

 overflow:hidden;white-space:nowrap;

Get Grid's height at runtime

 actualHeight = Grid1_scroller.offsetHeight
 scrollAreaHeight = Grid1.offsetHeight

Get width of a column at runtime

 Grid1.cell(0,1).offsetWidth  'width of column 1

Test to see if a grid cell is empty

Grid cells are initialized with a value of &nbsp; (so they don't collapse). To test for this:

 If GridCart.getValue(n,1) = "&nbsp;" Then 

Get the current scroll position

Grid uses the iScroll library for scrolling. The iScroll functions are in Grid1_ref, where Grid1 is the name of your grid.

 Grid1_ref.x      'current horizontal position
 Grid1_ref.y      'current vertical position
 Grid1_ref.directionX/Y   'last direction (-1 down/right, 0 still, 1 up/left)
 Grid1_ref.currentPage  'current snap point info

Scrolling Events

Grid uses the iScroll library for scrolling. The iScroll functions are in Grid1_ref, where Grid1 is the name of your grid. The following events can be used:

  • beforeScrollStart, executed as soon as user touches the screen but before the scrolling has initiated.
  • scrollCancel, scroll initiated but didn't happen.
  • scrollStart, the scroll started.
  • scrollEnd, content stopped scrolling.
  • flick, user flicked left/right.
  • zoomStart, user started zooming.
  • zoomEnd, zoom ended.
 Grid1_ref.on('scrollEnd', scrollEnd)
 
 Function scrollEnd()
   console.log("Scrolling ended")
 End Function

Output