Getting a Cell Value

Using the JavaScript API there are several ways to get the cell value depending on the context.

To download the source for this tutorial, click here (http://www.nitobi.com/images/kb/nitobigridsetcellvalue.zip).

Getting an Arbitrary Cell Value

If you would like to get an arbitrary cell value by cell coordinates, first get the grid object, and use getCellObject.

function getGridValue(GridID, Row,Col)
{
var myGridObj = $(GridID).jsObject;
var CellValue = myGridObj.getCellObject(Row,Col).getValue();
return CellValue;
}

Getting the Selected Cell Value

If you would like to get the currently selected cell value you can do so using the getSelectedRow and getSelectedColumn methods.

function getSelectedValue(GridID)
{
var myGridObj = $(GridID).jsObject;
var myRow = myGridObj.getSelectedRow();
var myColumn = myGridObj.getSelectedColumn();
var CellValue = myGridObj.getCellObject(myRow,myColumn).getValue();
return CellValue;
}

Getting the Selected Cell Value Using Grid Events

Its also possible to get the cell value in the event model by using the native eventArgs feature. By including an argument called eventArgs in a function call from an event, the grid will pass the event object, which contain (among other things) the selected grid and cell.

In your Grid tag:

  <ntb:grid id="SimpleGrid"
    width="350"
    height="300"
    mode="locallivescrolling"
    datasourceid="data"
    oncellclickevent="seeCurrentValue(eventArgs)"
    toolbarenabled="true">

Then, in seeCurrentValue():

function seeCurrentValue(eventArgs)
{
var myRow = eventArgs.cell.getRow();
var myColumn = eventArgs.cell.getColumn();
var myGridObj = eventArgs.getSource();
  var CellValue = myGridObj.getCellObject(myRow,myColumn).getValue();

// We dont want to just show the alert right away or the "true" result wont bubble
// up to the grid and allow the cell to be selected. So, we put it on a timeout.

  setTimeout("alert('" + CellValue + "');", 100);
  return true;
}

Getting the Cell Value in a Validation

Sometimes you want to validate a cell value from the user before you accept it. You can do this using the oncellvalidateevent, which works on the Grid tag or the column tag.

In your Grid tag:

  <ntb:grid id="SimpleGrid"
    width="350"
    height="300"
    mode="locallivescrolling"
    datasourceid="data"
    oncellvalidateevent="validateCell(eventArgs)"
    toolbarenabled="true">

.. we use the oncellvalidate event and pass eventArgs. The eventArgs object for validation contains the following:

source - The object which is firing the event.
cell - The Cell object of the cell that received focus.
newValue - The value that the user has entered into the cell.
oldValue - The previous value that the was entered into the cell.

Now, in our validateCell function we can get the new and old values. By returning false from this function, we prevent the grid from blurring the cell and the user has to keep typing or type something new. By passing true we accept the new value. We can revert to the old value by passing true and then setting the cell to the old value on a timeout. Eg:

function validateCell(eventArgs)
{
var myNewValue = eventArgs.newValue;
var myOldValue = eventArgs.oldValue;

// If I wanted to prevent the cell from blurring I can return false like this:
// return false;

// However, if I want to either revert the value or set some new value I can
// use setValue() and use a timeout to make put it outside the cell validation
// execution context like this:

var myGridCell = eventArgs.getCell();

setTimeout(function() {myGridCell.setValue(myOldValue);}, 0);
return true;

}

Getting a field of XML by Row Number

You can also get a field from the xml (a hidden column of data really). This is the same as using getXMLDataField() in Grid 2.8.

function getXMLField(GridID, Row, FieldName)
{
var myGridObj = $(GridID).jsObject;

// Now we call getDataSource. If you know the name of your datasource use that
// (in this case we called it 'data') but otherwise the name is '_default';
var myGridDataTable = myGridObj.getDataSource("data");

var FieldValue = myGridDataTable.getRecord(Row).getAttribute(myGridDataTable.fieldMap[FieldName].substring(1));
return FieldValue;
}

To download the source for this tutorial, click here (http://www.nitobi.com/images/kb/nitobigridsetcellvalue.zip).

View Printable Version

Comments:

Poster: Danny (Friday, July 13, 2007)

Tutorial source needs javascript source "nitobi.grid.js"

Nitobi Product Knowledgebase