When use the property or method of SMART datagrid Objects, you should often specify the location of the data cell in many cases. The location of the data cell is determined by two values such as Column and Row, and if CellIndex object has both of them, they can be used as the location values of the data cell in the corresponding method or property.
In this example, we will use the definition of the field and column used in Column Grouping, to learn the case of using CellIndex, and the way to change the location of the focused cell specified by focusedIndex property and respond to the change event.
In the grid below, the cell in which is displayed the box with thick lines is the one has the input focus, and GridBase.focusedIndex property will return the location value of this cell. When start typing with using the keyboard, the editor will be displayed in this cell and the change will be started. We will learn the cell editing related details in another example.
You can use GridBase.setFocusedIndex method to change the location of the focused cell. If click "Change Focus" button above, the focus location will keep moving down.
var index = grdMain.focusedIndex();
index.rowIndex++;
grdMain.setFocusedIndex(index, true);
If the user uses the keyboard and mouse or directly calls setFocusedIndex to change the location of focused cell, GridBase.onCurrentChanged event will be fired. And, onCurrentChanging event will be fired just before the change, but if return Boolean false, the cell location will not be changed.
grdMain.onCurrentChanging = function (grid, newIndex, oldIndex) {
return $('#chkChange')[0].checked;
};
grdMain.onCurrentChanged = function (grid, newIndex) {
$('#txtCurrent').text("(" + newIndex.rowIndex + ", " + newIndex.column.name() + ")");
};
When you only need to check the change of the data row, you can use onCurrentRowChanged event. This event is only fired when the location of the data row has been changed. Please refer to GridBase.onCurrentRowChanged help topic about more details.
grdMain.onCurrentRowChanged = function (grid, oldRow, newRow) {
$('#txtCurrentRow').text('DataRow: ' + oldRow + ' -> ' + newRow);
};
When you click or double click the mouse in the data cell, an event will be fired, and the location information of the corresponding cells will also be transferred to CellIndex object at this time.
grid.onDataCellDblClicked = function (grid, index) {
$('#txtClicked').text("(" + index.rowIndex + ", " + index.column.name() + ") " + " double clicked.");
};