jsUI-Grid var mygrid = new Object(); mygrid = gridNew("mygrid", "default", document.getElementById("gridCell"), null); mygrid.rowClick = doClick; mygrid.cellClick = doClick; mygrid.createColumn("col1", "First Column", null, null, false); var cellArray = new Array(); cellArray[0] = mygrid.createCell("r1c1", "First Cell", "one", null, null, null); mygrid.createRow("row1", cellArray); The grid is a control that can be used for accepting input for large amounts of data in a structure that can be defined by the developer. It is compatible with Internet Explorer 5.0 and FireFox 1.0 or better. jsUI-Global/common.js jsUI-Global/uiCommon.js jsUI-Grid/component.js index.htm

The DOM object to which the grid is attached. Frequently a DIV or TD, which can be used to provide a border or size constraints on the grid.

document.getElementById(mygrid.gridParent.id); document.body DOM Object. The property is read-only, having been assigned during Grid instantiation.

The DOM object of the currently selected row in the grid.

alert (mygrid.currentRow.innerHTML); DOM Object. This property is read only.

Gets or sets the string value representing the path to the root of the jsObjects directory. Used for calculating style and graphics file paths. Initially set during instantiation.

mygrid.rootDir = "http://localhost/libraries/jsobjects"; http://<server>/jsObjects String. This value only needs to be set if jsObjects is installed in a custom location.

Gets or sets a pointer to an optional instance of a jsUI-Textbox object. Used if validation is needed on grid cells.

mygrid.textChecker = mytextChecker; Javascript Pointer. This value only needs to be set if jsUI-Textbox validation is to be used on grid cells in edit state.

Gets or sets the read/write status of the grid. This value must be set before rows are created. Default is false, meaning the Grid can be edited by the user.

mygrid.readOnly = true; Boolean.

Instantiates the grid through assignment into a Javascript object.

Required. The name for the new grid. Must match the name of an empty Javascript object to contain the grid. Optional. The name of the CSS (excluding the extension and path) file to use for the grid. If left blank, "default" will be used. Optional. The object that the grid is to be attached to. If no value is passed, the grid will be appended to document.body Optional. The path to the root of the jsObjects directory. If left blank, the default path will be used. var mygrid = new Object(); mygrid = gridNew("mygrid", "default", document.getElementById("gridDiv"), "../jsobjects"); The grid object. This is the only method that does not appear to be a member of the object -- because the object can't have members until it's instantiated. A blank object is created and will be filled with the jsUI-Grid members.

Creates a column in the grid. Used to define the initial (empty) appearance of the grid.

Required. A unique string to be used as the DOM ID for the new cell. Required. The text that appears as the title of the column. Optional. The path to an image that can be used as the title of the column. Pass "checkmark" to label a checkbox column with a standard graphic. Required. The width in pixels for the new column. Optional. Indicates whether or not the column is an index (numbered) column. Can be used to show row numbers in the first column. Nothing

Creates a cell object that can be added to a new row in a grid.

Required. A unique string to be used as the DOM ID for the new cell. Optional. The text that appears to the user in the cell. Optional. The value of the cell, not visible to the user. Required. The type parameter is used to specify one of the follow input cell types: CHECK - a checkbox for boolean input ICON - a static image for representing an item in the grid. The cellValue parameter contains the path to the image, while the cellText parameter contains the tooltip text.
ELLIPSIS - used in conjunction with the cellMore parameter. In this cell type, entering edit mode will show an ellipsis (...) button that can be used to call an external function.
TEXT - Free-form text input. However, if the textChecker property has been assigned, the string "TEXT" can be replaced with a valid jsUI-Textbox datatype to allow input control and validation.
Optional. True or False indicating whether or not the user can edit the value of the cell. Optional. Used in conjunction with the cellType ELLIPSIS. Pointer to a function called when the ellipsis is clicked. The functions return value becomes the cells value. Object. A cell object prepared according to supplied parameters, that can be added to a row using the createRow method.

Adds a new row to the grid, containing the cells passed in the array.

Required. A unique string to be used as the DOM ID for the new row. Required. An array of cell objects created using the createCell method. Nothing

Used to put a grid row into edit mode.

Required. The ID of the row to be edited. Object. The grid object.

Removes a row from the grid. Fires the deleteDone event before removing the row.

Required. The ID of the row to be deleted. Pass the string "all" to remove all rows (excluding the title row) from the grid. Object. The grid object.

Used to move the row selection up or down.

Required. The ID of the currently selected row. This value can be obtained with the currentRow property. Required. A string indicating which direction to move the selection. Use "UP" or "DOWN" Nothing

Returns an object containing column contents for a given row.

Optional. The ID of the row to get data from. This parameter is optional, and constrains the return value to only a specific row. If excluded data from the entire grid will be returned. Object. An object representing the data in the grid. Use the serializeObject common function to see a textual representation of the data. alert (serializeObject(mygrid.getGridData()));

Adds a new button to the bottom of the grid, allowing the user to invoke an external function for adding rows to the grid.

Required. Pointer to an external function to be called when the new button is clicked. Nothing.

Fires whenever a cell is clicked, passing the target object, so that external code can respond.

mygrid.cellClick = handler; Although Mozilla and Internet Explorer disagree on how to reference the target object, the component handles this, reliably passing the target for both browers.

Fires when a cell's edit state is exited by loss of focus or keyboard input, passing the cell object that was just edited, so that external code can respond.

mygrid.editDone = handler; Although Mozilla and Internet Explorer disagree on how to reference the target object, the component handles this, reliably passing the target for both browers.

Fires before a row is deleted from the grid. Used to allow external code to control or react to row deletion behaviour.

mygrid.deleteDone = handler; Expects a true or false, defaulting to true to allow the row to be removed.