In this section:
How to: Reference: |
The Grid controls and the HTML Table control display the contents of a data source stack to end users. The Grids differ from the HTML Table in that they enable you to directly change data in a stack.
There are two different read/write grids available: the ActiveX Grid and the JavaScript Grid.
The ActiveX Grid control has been available since WebFOCUS Maintain 4. It supports JavaScript and VBScript.
Installation of WebFOCUS Developer Studio will automatically register the control on your machine to enable it for local deployment.
For web deployment, the first time an application containing the ActiveX Grid control is run, it requires a one-time download of the signed ActiveX control for registration on the client (except if WebFOCUS Developer Studio is also installed on the client). The browser security settings under Internet Options should allow a prompt or enable for downloading signed ActiveX controls.
Some browsers, such as Firefox®, do not support ActiveX.
The JS Grid is available for new development as of WebFOCUS Maintain Release 7.7. It is not an ActiveX control and does not require anything to be registered on the client. It can be run in non-IE browsers, such as Firefox.
Note: VBscript is not supported with the JS Grid.
The ActiveX Grid and the JS Grid share the same dialogs and most settings within the MDE, including Properties and Events. The exceptions are noted. Functions must be coded differently and are outlined in separate sections.
For an example of using the original ActiveX grid, see the WebFOCUS Maintain Advanced Tutorial in the Maintain Getting Started manual. For an example of using HTML tables, see the WebFOCUS Maintain Basic Tutorial in Maintain Getting Started manual and Using an HTML Table to Display the Results of a WebFOCUS Report.
To remove a column from the Table Columns box, select it and click the left arrow button .
Tip: If you want to add a column to your HTML Table from the data source stack used by the table, drag it from the Project Explorer to the HTML Table. WebFOCUS Maintain will add it to the end.
Use the Control Columns dialog box, shown in the following image, to populate a grid or HTML Table with data.
This dialog box includes the following options:
Displays the data source stacks available in this procedure.
Creates a data source stack with the Stack Editor.
Contains the columns in the data source stack you selected in the Stack list.
Includes the column you selected in the list of data source stack columns in the Table columns box.
Removes the column you selected in the Table columns box.
Lists the columns that the HTML Table will display.
Displays each of the column headings, and sorts the table by the header title when clicked.
The default height for the header can be changed to accommodate additional lines in the Header Title. The default value for the Header Height is 23.
Note: Changing this value for a column adjusts the height for the entire header line.
Applies to HTMLTable and JS Grid.
Displays the name of the column in the data source stack, and sorts the table by its column name when clicked.
Displays the number of characters in a column, and sorts the table by width when clicked. Data values will automatically wrap when the length exceeds the width of the column.
Displays row numbers in the HTML Table when checked.
Moves a selected column up in the list of columns.
Moves a selected column down in the list of columns.
Use the Grid Column Properties/Table Column dialog box, shown in the following image, to format columns in your grid or HTML Table.
This dialog box contains the following elements:
Displays the column name.
Contains the title of the column that will be displayed at run time. By default, this is the column name, but you can type something else here.
The default height for the header can be changed to accommodate additional lines in the Header Title. The default value for the Header height is 23.
Note: Changing this value for a column adjusts the height for the entire header line. This applies to HTMLTable and JS Grid.
Contains the width of the column. You can type a new value here.
Enables you to left-justify, center, or right-justify the contents of a column.
For HTML Tables only. Specifies the content of your column as text, HTML, or the path to an image. If you specify the content of your column as text, your stack column will be displayed in the table. If you specify the content of your column as HTML, WebFOCUS Maintain assumes that you have HTML code in your stack column. Therefore, it interprets the column as HTML. If you specify the path to an image, WebFOCUS Maintain assumes that the stack column contains the name and location of an image. Note that if the path contains backslashes, you must use double backslashes (for example, C:\\ibi_img\\graphic.gif).
For HTML Tables only. Specifies whether your table will have drill-down links from the column body or heading. For more information, see Creating Links in HTML Tables.
For Grids only. Prohibits users from writing to the read/write grid when checked.
Changes the font, font style, and size of the text in your column or header.
Changes the color of the text in your column or header. For more information on text color, see Defining Colors for Your Form and Controls.
Changes the background color of your column or header. For more information on background color, see Defining Colors for Your Form and Controls.
The following section lists the events available for the ActiveX and JS read/write grids.
Note: Maintain and IWC triggers are not supported for the following events: Focus, OnEditStart, OnEditFinish, OnColSized, OnColChange, OnCanViewMove. These events must be called using JavaScript (JS grid, ActiveX grid) or VB Script (ActiveX grid).
Occurs when the cursor or focus is moved to another cell or object. This event is called by On Entry in the V3 grid.
Occurs when the cell is highlighted. Maintain triggers and IWC triggers are not supported for this event. This event is called by On Exit in the V3 grid.
Occurs any time a new column or row comes into view by each up, down, left or right arrow key and also by the scroll bar.
It will trigger for each row or cell, so the scroll bar will cause it to trigger repeatedly. Maintain triggers and IWC triggers are not supported for this event. This event is called by ViewPortChanged in the V3 grid.
Occurs when the end user double-clicks the corner button.
Occurs when the end user left mouse clicks on the corner button.
Occurs when the end user right-clicks on the corner button.
Occurs when a cell changes focus.
Occurs when the cursor moves to another control.
Occurs when the end user presses a character on the keyboard.
Occurs when a column changes focus. Maintain triggers and IWC triggers are not supported for this event.
This notification can be used to assign any given columns a specific width. If you are creating an application such as a calendar, you must assign each column a specific width. Maintain triggers and IWC triggers are not supported for this event.
This notification enables you to cancel any edits which the user has performed on the cell. Maintain triggers and IWC triggers are not supported for this event.
Occurs when a edit is about to start. You can edit a cell by calling the StartEdit function. For example, a message box can be used to inform users when they are about to edit a cell. Maintain triggers and IWC triggers are not supported for this event.
Occurs if the bottom row of the grid has been reached. By processing this notification, new rows can be added to the grid dynamically. If the grid tries to go past its current bottom, it first asks the default data source to check and see if more records exist (up to numrows+rowspast).
Occurs when the end user presses a key on the keyboard. This event encompasses the following events from V3: Page Up, Page Down, Home, End, Up Arrow, and Down Arrow.
Occurs when the end user left mouse clicks on a given cell.
Occurs when the end user right-clicks on a given cell.
Occurs when the end user changes the focus from Row A to Row B.
Occurs when the end user changes the row size.
You can use this notification to set a default size for all of the rows. After this is set, the end user cannot change the size of the rows.
Occurs when the end user double-clicks the side heading.
Occurs when the end user left-clicks the side heading.
Occurs when the end user right-clicks on the side heading.
Occurs when the end user double-clicks event the Top heading. Remember the top heading has a value of -1, and if there are multi-top headings, then each heading has a value which decrements by -1.
Occurs when the end user left-clicks the Top Heading.
Occurs when the end user right-clicks the Top heading.
Note: The following parameters are reserved for internal use and are not to be reset by the developer: processed, updn, and cancelflag.
When you select your grid or HTML Table, you will see a list of grid properties in the property sheet. Changing these properties will change what your grid or HTML Table looks like and how it behaves at run time.
Many of the styling properties can also be changed using a Cascading Style Sheet. For more information on Cascading Style Sheets, see Using Cascading Style Sheets.
Choose your property based on the task you wish to perform:
If you want to change the contents of the grid or HTML Table, use the Columns Property to open the Control Columns dialog box. For more information, see Control Columns Dialog Box.
If you want to change the name of the grid or HTML Table that identifies it to the procedure, use the (Name) Property. For more information, see the (Name) Property.
If you want to change the size or location of the grid, use the Bottom Property, Left Property, Right Property, Top Property, or use a style sheet. For more information, see the Bottom Property, Left Property, Right Property, and Top Property. You can also move or resize the grid directly in the form.
If you want to change the size or location of the HTML Table, use the Overflow Property set to Clip or Scroll. The Clip setting allows you to restrict the length of the HTML Table. Only the Scroll setting allows the entire HTML Table, including the width, to be resized. Vertical and horizontal scroll bars are automatically provided when the data exceeds the control size. Use the Bottom, Left, Right, or Top properties, if they are regulated by the Overflow setting. You can also move the location of the HTML Table directly on the form.
If you want to omit the header, use a style sheet or use the Headers Property.
If you want to change the color of the grid or HTML Table, the BackColor and ForeColor properties have the precedence in the following order:
For an HTML Table only, you can use a style sheet.
If you want to control which columns remain stationary while scrolling the grid, use the FixedColumns Property. For more information, see FixedColumns Property.
If you want to change the text of the font, the Font Property has precedence in the following order:
For a HTML Table only, you can use a style sheet.
If you want to add a border to the HTML Table, use the Border Property to determine whether you have a border and what type of border it is. The BorderColor Property allows you to determine the color of the border. The BorderWidth Property allows you to determine the width of the border. You may need to increase the BorderWidth and change BorderColor in order to take full advantage of some of the border types. You can also use a style sheet for HTML Table only.
If you want to display lines between columns and rows, use a style sheet for HTML Table only or use the GridLines Property. For more information, see GridLines Property.
If you want to make the grid or HTML Table inactive or make it invisible, use the Enabled Property to determine whether the button is active or not. If the button is inactive, it will be dimmed out and nothing will happen when the end user clicks it. You can also use the Visible Property to determine whether the button is visible to the end user or use a style sheet. For more information, see the Enabled Property and the Visible Property.
If you want to change what the cursor looks like when it is on top of the grid or HTML Table, use the CursorPointer Property or use a style sheet. For more information, see the CursorPointer Property.
If you want to display a tooltip when the cursor is on the top of the grid or HTML Table, use the ToolTipText Property. For more information, see the ToolTipText Property.
If you want to assign a Help topic to the grid or HTML Table, use the Help Property. For more information, see Assigning Help to Your Forms and Controls.
If you want to move the grid or HTML Table to another layer, use the Layer Property. For more information, see Layering Controls.
If you want to control the display order of the HTML Table or JS Grid when more than one control is overlaid, use the ZIndex Property. This cannot be used with the ActiveX grid control. For more information, see the ZIndex Property.
How to: |
A link in an HTML Table enables the end user to click a cell to drill down to other tables, forms, reports, or webpages.
For an example of this process, see the Maintain Getting Started manual.
When you deploy and run your application, you will see that the areas you designated as clickable, will be blue and underlined.
If your action is a Maintain function, you can use special syntax to determine the row number, column number, or value of the cell that is clicked. For more information, see How to Determine Row Number, Column Number, or Value of the Cell When an HTML Table Is Clicked.
If your action is a JavaScript or VBScript function, you can use special syntax to determine the row number, column number, or value of the cell that the end user clicked. For more information, see Defining Events and Event Handlers.
Note: Because clicking on a row in an HTML Table does not result in a selection (unlike clicking an item in a list or combo box), WebFOCUS Maintain does not set the FocIndex of the underlying data source stack to the number of the current row (as it does for list box or combo box selections). To set FocIndex to the last clicked row, see How to Reset FocIndex in a Data Source Stack for an HTML Table.
If you use a Maintain function to handle the ClickLink event in an HTML Table, then you can use special syntax in your function to determine what part of the HTML Table the end user clicked.
If you want to determine the row number, use:
formname.tablename.ClickRow
The header row returns 0, and the first data row returns 1.
If you want to determine the column number, use:
formname.tablename.ClickColumn
If you want to indicate the value of the cell, use:
formname.tablename.Value
When the end user clicks a row in an HTML Table, use the following syntax to reset the value of FocIndex (the number of the current row) for the data source stack associated with that table:
COMPUTE stack.FocIndex = form.HTMLTable.ClickRow;
This is useful if you want to perform some operation on that particular row of the data source stack (display it or change it).
How to: Reference: |
Within the read/write grids, you can use script functions to alter the properties of the grid. Functions for the ActiveX Grid can be written using either VBScript or JavaScript. Functions for the JS Grid can be written in JavaScript only. For a complete list of functions available for each grid, see Property Functions in the ActiveX Read/Write Grid and Property Functions in the Read/Write JS Grid. Examples are given for the most commonly used functions.
Name of Function |
VBScript |
Result |
---|---|---|
AddFont |
fontid=Formn.Gridn.AddFont (fontid, 0, 1) |
Text in the cell indicated by column and row number will appear in the font indicated by fontid. |
QuickSetFont |
Formn.Gridn.QuickSetFont c,r, fontid |
Sets font for specified cells. |
RedrawAll |
Formn.Gridn.RedrawAll |
Updates grid when you have made changes. |
AddTab |
Formn.Gridn.AddTab "text", n |
When the tab is clicked the sheet will display the text in cell n. |
CellGetReadOnly CellSetReadOnly |
Formn.Gridn.GetCell c, r, Formn.Gridn. CellSetReadOnly [True|False] read=Formn.Gridn.CellGetReadOnly |
Sets specified cell to read only access when set to True. |
CellGetText CellSetText |
Formn.Gridn.GetCell c, r, Formn.Gridn.GetCellText Formn.Gridn.CellSetText "text" |
Retrieves the text of a given cell and sets the text of that cell. |
QuickSetText |
Formn.Gridn.QuickSetText c,r, "text" |
Serves as an alternative method to using CellGetText and CellSetText individually. |
CellGetTextColor |
color = Formn.Gridn. CellGetTextColor(r g b) |
Specifies the color of the text in a cell. Values for r, g, and b specify the desired intensity of red, green, and blue. The values are on a scale of 0 to 255. |
QuickSetTextColor |
Formn.Gridn.QuickSetTextColor 0, 0, RGB(r,g,b) |
Sets the text color of the specified cell. |
QuickSetBackColor |
Formn.Gridn.QuickSetBackColor 0, 0, RGB(r,g,b) |
Sets the background color of the specified cell. |
GetCurrentColumn |
column=Formn.Gridn. GetCurrentColumn |
Identifies the column that is clicked on or selected by user. |
GetCurrentRow |
row=Formn.Gridn.GetCurrentRow |
Identifies the row that is clicked on or selected by user. |
GetGridDefault |
Formn.Gridn.GetGridDefault |
Default grid is set to 10 columns and 10 rows. |
QuickSetMask |
Formn.Gridn.QuickSetMask 0, 0, "###" |
Selectively includes or excludes certain values from a field. For more information on how to use Mask options, see How to Use the Mask Function With the ActiveX Grid. |
QuickSetAlignment |
Formn.Gridn.QuickSetAlignment 0, 0, 2 |
Sets the alignment of the specified cells. |
GotoCell |
Formn.Gridn.GotoCell c, r |
The cell specified by column and row number will be in focus. |
GotoColumn |
Formn.Gridn.GotoColumn c |
The column specified by column and row number will be in focus. |
LockColumns |
Formn.Gridn.LockColumns c |
The specified number of columns remain visible when scrolling horizontally. |
LockRows |
Formn.Gridn.LockRows r |
The specified number of rows remain visible when scrolling vertically. |
SetCurrentColumn |
Formn.Gridn. SetCurrentColumn c |
Focus will be on the column indicated by c. |
SetCurrentRow |
Formn.Gridn.SetCurrentRow r |
Focus will be on the row indicated by r. |
SetGridDefault |
Formn.Gridn.SetGridDefault |
Enables you to specify the default values for a grid. |
SetGridDefault |
Formn.Gridn.SetGridDefault |
Enables you to specify the default values for a grid. |
To use the mask feature you have to call UseMaskedEdit(1) from the OnEditStart notification. Otherwise, the mask will have no effect.
Then use the following syntax string when coding in JavaScript:
Formn.Gridn.QuickSetMask (0, 0, "#");
where:
Is any combination of the following values:
Value | Description |
---|---|
0 | Digit (0 through 9). Entry is required. Plus (+) and minus (-) signs are not allowed. |
9 | Digit or space. Entry is optional. Plus (+) and minus (-) signs are not allowed. |
L | Letter (A through Z). Entry is required. |
? | Letter (A through Z). Entry is optional. |
A | Letter or Digit. Entry is required. |
a | Letter or Digit. Entry is optional. |
& | Any character or a space. Entry is required. |
C | Any character or a space. Entry is optional. |
. , : ; - / | Decimal placeholder and thousands, date, and time separators. The actual character used will depend on the regional settings specified in the Windows Control Panel. |
\\ | Causes the character that follows to be displayed as a literal character. Used to display any of the characters listed in this table as literal characters. For example, \\A is displayed as just A, \\& is displayed as just &, and so on. |
For an example of how the Mask function can be used, see Setting a Mask in a Grid Cell.
To change the font in which the text in a cell appears, use the following VBScript within the push button event handler:
fontid = Form1.Grid1.AddFont (Garamond, 14, 1) Form1.Grid1.QuickSetFont 0,0,fontid Form1.Grid1.QuickSetText 0,0,"New Font" Form1.Grid1.RedrawAll
When the push button is clicked, the first cell will display the text New Font in the Garamond font.
To set a grid cell to allow read-only access, use the following VBScript within the push button event handler:
Form1.Grid1.GetCell 0,0 Form1.Grid1.CellSetReadOnly True Form1.Grid1.SetCell 0,0 Form1.Grid1.GetCell 0,0
When the push button is clicked, the first cell will be restricted to read-only access.
To display a message when a grid column is clicked, use the following VBScript within the OnLClicked grid event:
column = Form1.Grid1.GetCurrentColumn message = "The column which was clicked is " & column MsgBox message
When the grid is left-clicked, the message, The column which was clicked is 0, is displayed when column 1 is clicked. Column 1 will display 0, column 2 will display 1, and so on.
To display a message when a grid row is clicked, code the following VBScript within the OnLClicked grid event:
row = Form1.Grid1.GetCurrentRow message = "The row which was clicked is " & row MsgBox message
When the grid is left-clicked, the message, The row which was clicked is 0, is displayed when row 1 is clicked on. Row 1 will display 0, row 2 will display 1, and so on.
To set the GoToCell function, code the following VBScript within the push button event handler:
Form1.Grid1.GoToCell 0, 0 Form1.Grid1.RedrawAll
When the push button is clicked, the first cell will be in focus.
To set the GoToColumn function, code the following VBScript within the push button event handler:
Form1.Grid1.GoToColumn 2 Form1.Grid1.RedrawAll
When the push button is clicked, the third column will be in focus.
To set the SetCurrentColumn function, code the following VBScript within the push button event handler:
Form1.Grid1.SetCurrentColumn 3 Form1.Grid1.RedrawAll
When the push button is clicked, focus will be on the third column.
To set the SetCurrentRow function, code the following VBScript within the push button event handler:
Form1.Grid1.SetCurrentRow 3 Form1.Grid1.RedrawAll
When the push button is clicked, focus will be on the third row.
To set an information mask in a cell, use the following VBScript:
Form1.Grid1.QuickSetMask (0, 1, "(###) ###-####");
The example allows the user to enter a ten digit number. The first three numbers appear in parentheses, and a dash appears after the next three numbers, as in a telephone number.
To set the text of a cell, use the following VBScript within the push button event handler:
Form2.Grid1.GetCell 1,1 Form2.Grid1.CellSetText "NewText" Form2.Grid1.SetCell 1,1 Form2.Grid1.RedrawAll
When the push button is clicked, the text of the selected cell will change to "NewText."
To set the background color of a cell, use the following VBScript within the push button event handler:
Form1.Grid1.QuickSetTextcolor 2, 1, RGB(255,0,0) Form1.Grid1.RedrawAll
This example specifies that the second cell in the first row will display the text color red.
To set the color of the text in a cell, use the following JavaScript with the OnSHLClicked event:
row=Form1.Grid1.GetCurrentRow(); numRows = Form1.Grid1.GetNumberRows(); numCols = Form1.Grid1.GetNumberColumns(); for(col=0; col < numCols; col++) { Form1.Grid1.GetCell(col, row); Form1.Grid1.CellSetTextColor(0x0000ff); Form1.Grid1.SetCell(col, row); Form1.Grid1.Redrawall(); }
When the side heading is left-clicked, the text color in the selected cell will change.
Note: This JavaScript is recommended for use with the following events: OnSHDClicked, OnSHLClicked, OnSHRClicked, OnTHDClicked, OnTHLClicked, OnTHRClicked.
To dynamically set a cell to read-only access, use the following JavaScript with the OnTHLClicked event.
numRows = Form1.Grid1.GetNumberRows(); for(row=0; row < numRows; row++) { Form1.Grid1.GetCell(col, row); Form1.Grid1.CellSetReadOnly(1); Form1.Grid1.SetCell(col, row); }
When the top heading is left-clicked, the selected cell becomes read-only.
Note: This JavaScript is recommended for use with the following events: OnSHDClicked, OnSHLClicked, OnSHRClicked, OnTHDClicked, OnTHLClicked, OnTHRClicked.
Name of Function |
JavaScript |
Result |
---|---|---|
CellGetBackColor CellSetBackColor |
Formn.Gridn.CellGetBackColor(col,row) Formn.Gridn.CellSetBackColor(col,row,color) where color is ,”rgb(r,g,b)”); |
Retrieves or sets the background color of the specified cell. |
CellGetReadOnly CellSetReadOnly |
Formn.Gridn.CellGetReadOnly(col, row) Formn.Gridn.CellSetReadOnly(col, row, True|False) |
Retrieves the read-only setting, or sets the specified cell, row, or column to read-only access when set to True. Default is False. |
CellGetText CellSetText |
Formn.Gridn.CellGetText(col, row) Formn.Gridn.CellSetText(col, row, text) |
Retrieves or sets the text of a given cell. |
CellSetFont |
Formn.Gridn.CellSetFont(col,row,font) |
Sets the font for the specified cell. |
CellSetFontSize |
Formn.Gridn.CellSetFontSize (col,row,fontsize) |
Sets the font size for the specified cell. |
CellSetFontStyle |
Formn.Gridn.CellSetFontStyle (col, row, style) |
Sets the font style for the specified cell. Font, font size and style can be set at one time using CellSetFontStyle. |
CellGetTextColor CellSetTextColor |
Formn.Gridn.CellGetTextColor(col,row)
Formn.Gridn.CellSetTextColor(col,row,color) where color is ,”rgb(r,g,b)”); |
Retrieves or sets the color of the text for the specified cell. |
ColumnSetContentType |
Formn.Gridn ColumnSetContentType (col,contentType); Where contentType is:
|
Allows HTML and images as well as text to be used as the content of the specified column. Usage notes:
|
GetCurrentColumn() |
Formn.Gridn.GetCurrentColumn() |
Identifies the column that is clicked on or selected by the user. |
GetCurrentRow() |
Formn.Gridn.GetCurrentRow() |
Identifies the row that is clicked on or selected by the user. |
GetNumberColumns |
Formn.Gridn.GetNumberColumns() |
Gets the total number of columns in the grid stack. |
GetNumberRows |
Formn.Gridn.GetNumberRows() |
Gets the total number of rows in the grid stack. |
OneClickEdit |
Formn.Gridn.OneClickEdit(True|False) |
Allows for one click edit. |
SetCellFocus |
Formn.Gridn.SetCellFocus(col, row) |
Place the cursor on a Grid Cell. |
Note: When specifying the number of columns, the row number is counted. When specifying current row and column, the first cell is 0,0.
To change the appearance of the JS Grid before the form is displayed, create your own JavaScript function called JSGridOnload, as shown in the following codeblock, and embed it onto the form.
function JSGridOnload() { Form1.Grid1.ColumnSetContentType(2,1); }
All JS Grid functions, including ColumnSetContentType, CellSetBackColor and CellSetText, can be set using this method. Note that JavaScript is case-sensitive.
For more information on embedding JavaScripts into your Maintain form, refer to Using Script Functions in Your Project.
To change the font in which the text in a cell appears, use the following JavaScript within the push button event handler:
Form1.Grid1.CellSetFont(2,1, "HERALD");
When the push button is clicked, the cell in column 2 row 1 will display the text in the Herald font.
To change the font style in which the text in a cell appears, use the following JavaScript within the push button event handler:
Form1.Grid1.CellSetFontStyle(1,1,"font-weight: 700;font-size: 12px; font-style: italic; text-decoration: underline;");
When the push button is clicked, the cell in column 1 row 1 will display the text in italics with a size of 12 and underlined.
CellSetFontSize can also be used to set only the size of the font.
To set the focus on a cell, code the following JavaScript within the push button event handler:
Form1.Grid1.SetCellFocus(0,0);
When the push button is clicked, the first cell will be in focus.
To get the current column or row, code the following JavaScript within the grid event handler for a grid event such as OnRClicked:
var crow = Form1.Grid1.GetCurrentRow(); var ccol = Form1.Grid1.GetCurrentColumn(); alert("You are on row " + crow + " and column " + ccol);
When right-clicking on a particular cell, the alert will display the column and row numbers for that cell.
To get the total number of rows and/or columns in the grid, use the following JavaScript code from within the grid event handler for a grid event such as OnRClicked:
var nrow = Form1.Grid1.GetNumberRows(); var ncol = Form1.Grid1.GetNumberColumns(); alert("This grid has " + " " + nrow + " rows and " + ncol + " columns");
When right-clicking on the grid, the alert will display the total number of rows and columns in the grid.
To set the text of a cell, use the following JavaScript within the push button event handler:
var x = Form1.Grid1.CellGetText(1,1); alert(x); Form1.Grid1.CellSetText(2,2,'NewText');
When the push button is clicked, the alert will show the starting text of the selected cell and the text will change to NewText.
To set the text color of a cell, use the following JavaScript within the push button event handler:
Form1.Grid1.CellSetTextColor(0,0,"rgb(255,0,0)");
This example specifies that the first cell will display the text color in red.
To set the background color of a cell, use the following JavaScript within the push button event handler:
Form1.Grid1.CellSetBackColor(0,0,"rgb(255,0,0)");
This example specifies that the first cell will display the background color in red.
To set a grid cell to allow read-only access, use the following JavaScript within the push button event handler:
Form1.Grid1.CellSetReadOnly(0,0, "TRUE");
When the push button is clicked, the first cell will be restricted to read-only access.
To set the content type for a column, create a JSGridOnLoad function that uses the following JavaScript to specify the content prior to the display of the form:
Form1.Grid1.ColumnSetContentType(1,2);
This example sets the content type of the second column to Image. The data for the column is a variable that must be defined with a path to the image file, as in the following:
Compute stk(i).pic/a100=”/approot/ibisamp/logo.gif”;
WebFOCUS |