Realgrid Callback

Callback function

RealGrid provides various callback functions to handle user interaction and system events.

You can check the types of callback functions and calling methods below.

Click

Callback to notify that a grid cell has been clicked

gridView.onCellClicked = function (grid, clickData) {
    console.log("onCellClicked: " + JSON.stringify(clickData));
};

Callback to notify that a grid cell has been double-clicked

gridView.onCellDblClicked = function (grid, clickData) {
    console.log("onCellDblClicked: " + JSON.stringify(clickData));
};

Callback to notify that an element in a grid cell has been clicked

gridView.onCellItemClicked = function (grid, index, clickData) {
    console.log("onCellItemClicked: " + JSON.stringify(clickData));
    return true;
};

Callback to notify that the user has selected or deselected all by clicking the Header of the checkBar or entering checkAll true / false

gridView.onItemAllChecked = function (grid, checked) {
    console.log("onItemAllChecked: " + checked);
};

A callback to notify that the user changed the check by clicking the checkbox of the checkBar or calling checkItem

gridView.onItemChecked = function (grid, itemIndex, checked) {
    console.log("onItemChecked: " + checked + " at " + itemIndex);
};

A callback to notify that the user changed the check by clicking the checkbox of the checkBar or calling checkItem

gridView.onItemsChecked = function (grid, items, checked) {
    console.log(
        "onItemChecked: " + items.join() + " are checked as " + checked
    );
};

Callback to notify that a button was clicked in SearchCellEditor (opens in a new tab)

gridView.onSearchCellButtonClick = function (grid, index, text) {
    console.log("onSearchCellButtonClick: " + " button was clicked!");
};

Move

Callback to determine the change in the position of the grid's focus cell

gridView.onCurrentChanging = function (grid, oldIndex, newIndex) {
    console.log(
        "grid.onCurrentChanging: " +
            "(" +
            oldIndex.itemIndex +
            ", " +
            oldIndex.column +
            ") => (" +
            newIndex.itemIndex +
            ", " +
            newIndex.column +
            ")"
    );
    // return false; If you do this, the location does not change.
};

Callback that notifies the change in the location of the grid's focus cell

gridView.onCurrentChanged = function (grid, newIndex) {
    console.log(
        "grid.onCurrentChanged: " +
            "(" +
            newIndex.itemIndex +
            ", " +
            newIndex.column +
            ")"
    );
};

Callback that notifies the change in the location of the data row

gridView.onCurrentRowChanged = function (grid, oldRow, newRow) {
    console.log(
        "grid.onCurrentRowChanged: " + "(" + oldRow + " => " + newRow + ")"
    );
};

Callback to notify that a data row has been moved

dataProvider.onRowMoved = function (provider, row) {
    console.log("provider.onRowMoved: " + row + " to " + newRow);
};

Callback to determine the movement of a data row

dataProvider.onRowMoving = function (provider, row, newRow) {
    console.log("provider.onRowMoving: " + row + " to " + newRow);
    return true;
};

Callback to notify that multiple data rows have been moved

dataProvider.onRowsMoved = function (provider, row, count, newRow) {
    console.log("provider.onRowsMoved: " + count + " rows moved");
};

Copy Paste

Callback to determine copying with control + c keys

gridView.onCopy = function (grid, selection, event) {
    console.log("grid.onCopy");
};

Callback to determine pasting to grid

gridView.onPaste = function (grid, index, event) {
    console.log("grid.Paste");
};

Callback to notify that pasting has been done to grid

gridView.onPasted = function (grid) {
    console.log("grid.Pasted");
};

Callback to notify that pasting has been done to a grid cell

gridView.onEditRowPasted = function (
    grid,
    itemIndex,
    row,
    fields,
    oldValues,
    newValues
) {
    console.log("grid.onEditRowPasted: {" + newValues.join() + "}");
};

Callback to notify that multiple rows have been pasted

gridView.onRowsPasted = function (grid, items) {
    console.log("grid.onRowsPasted" + items);
};

Add/Edit/Delete

A callback that notifies that editing is canceled when the user presses the ESCAPE key during editing or cancel() is called

gridView.onEditCanceled = function (grid, index) {
    console.log(
        "grid.onEditCanceled driven, edit index=" + JSON.stringify(index)
    );
};

A callback that notifies that the value of an item has changed due to the user's key input, etc.

gridView.onEditChange = function (grid, index, value) {
    console.log(
        "grid.onEditChange driven, " +
            index.column +
            " at " +
            index.dataRow +
            " was replaced by value: " +
            value
    );
};

Callback that determines whether user input is reflected in the cell

gridView.onEditCommit = function (grid, index, oldValue, newValue) {
    console.log("grid.onEditCommit driven, " + oldValue + " => " + newValue);
};

Callback that notifies that the value changed by user input is reflected in the row

gridView.onEditRowChanged = function (
    grid,
    itemIndex,
    dataRow,
    field,
    oldValue,
    newValue
) {
    var v = grid.getValue(itemIndex, field);
    console.log("grid.onEditRowChanged: " + oldValue + " => " + newValue);
};

A callback that has the cell's position and editing result when cell editing is complete

gridView.onGetEditValue = function (grid, index, editResult) {
    console.log("grid.onGetEditValue: " + JSON.stringify(editResult));
};

A callback that notifies that a field value of an edit item being edited or added has been edited

gridView.onCellEdited = function (grid, itemIndex, row, field) {
    console.log("grid.onCellEdited: " + itemIndex + ", " + field);
};

A callback when the user decides to cancel row editing

gridView.onItemEditCancel = function (grid, itemIndex, state) {
    console.log("grid.onItemEditCancel: " + state);
    //return false; It is not canceled if you do this.
};

Callback to notify that the user has canceled editing a row

gridView.onItemEditCanceled = function (grid, itemIndex, state) {
    console.log("grid.onItemEditCanceled: " + state);
};

A callback that determines whether to add a data row

gridView.onRowInserting = function (grid, itemIndex, dataRow) {
    console.log("grid.onRowInserting: " + itemIndex);
    //To prevent addition, return a string message or boolean false.
    return null;
};

A callback that determines the actual deletion when the user presses Ctrl+Del or deletes with deleteSelection() (opens in a new tab)

gridView.onRowsDeleting = function (grid, rows) {
    console.log("grid.onRowsDeleting: " + rows);
    //If a non-null value is returned, display the specified text and cancel the deletion.
    return null;
};

Callback to determine the display of the Editor opened by Cell

gridView.onShowEditor = function (grid, index, props, attrs) {
    console.log("grid.onShowEditor: " + index.itemIndex + "," + index.column);
};

Callback to notify that editing is complete and the editor is hidden

gridView.onHideEditor = function (grid, index) {
    console.log("grid.onHideEditor: " + index.itemIndex + "," + index.column);
};

Callback to notify that data has changed

dataProvider.onDataChanged = function (provider) {
    console.log("provider.onDataChanged");
};

Callback to notify that multiple data rows have been restored

dataProvider.onRestoreRows = function (provider, rows) {
    console.log("provider.onRestoreRows: " + rows.join(", "));
};

Callback to notify that the number of data rows has changed

dataProvider.onRowCountChanged = function (provider, newCount) {
    console.log("provider.onRowCountChanged: " + newCount);
};

Callback to notify that a data row has been deleted

dataProvider.onRowDeleted = function (provider, row) {
    console.log("provider.onRowDeleted: " + row);
};

Callback to determine when a data row is deleted

dataProvider.onRowDeleting = function (provider, row) {
    console.log("provider.onRowDeleting: " + row);
    return true;
};

Callback to notify when a data row has been added

dataProvider.onRowInserted = function (provider, row) {
    console.log("provider.onRowInserted");
};

Callback to determine when a data row is added

dataProvider.onRowInserting = function (provider, row, values) {
    console.log("provider.onRowInserting: " + row);
    return true;
};

Callback to notify that multiple data rows have changed

dataProvider.onRowListUpdated = function (provider, rows) {
    console.log("provider.onRowListUpdated: " + rows.join(", "));
};

Callback to notify that rows have been deleted

dataProvider.onRowsDeleted = function (provider, rows) {
    console.log("provider.onRowsDeleted: " + rows.join(", "));
};

Callback to notify that multiple data rows have been added in bulk

dataProvider.onRowsInserted = function (provider, row, count) {
    console.log("provider.onRowsInserted: " + count + " rows inserted!");
};

Callback to notify that row state has changed

dataProvider.onRowStateChanged = function (provider, row) {
    console.log("provider.onRowStateChanged: " + row);
};

Callback to notify that multiple rows have changed state

dataProvider.onRowStatesChanged = function (provider, rows) {
    console.log("provider.onRowStatesChanged: " + rows.join(","));
};

Callback to notify that all rows have been cleared state

dataProvider.onRowStatesCleared = function (provider) {
    console.log("provider.onRowStatesCleared");
};

Callback to notify that multiple data rows have changed

dataProvider.onRowsUpdated = function (provider, row, count) {
    console.log("provider.onRowsUpdated");
};

Callback to notify that a row has been modified

dataProvider.onRowUpdated = function (provider, row) {
    console.log("provider.onRowUpdated: " + row);
};

Callback to determine row modification

dataProvider.onRowUpdating = function (provider, row) {
    console.log("provider.onRowUpdating: " + row);
    return true;
};

Callback that notifies that the value of the data has changed

dataProvider.onValueChanged = function (provider, row, field) {
    console.log(
        "provider.onValueChanged: " + row + " row, " + field + " fieldIndex"
    );
};

Keyboard input callback

Callback that determines key input

gridView.onKeyDown = function (grid, event) {
    console.log("You pressed... " + event);
};

Callback that notifies that a key is being pressed

gridView.onKeypress = function (grid, event) {
    console.log("You are pressing... " + event);
};

Callback that notifies that a key has been pressed.

gridView.onKeyUp = function (grid, event) {
    console.log("You pressed... " + event);
};

Rendering Complete Event

gridView.onDataLoadComplated = function (grid) {
    alert(
        "onDataLoadComplated event occurred. Row count: " +
            dataProvider.getRowCount()
    );
};

Grid Editor Recommended Grid Settings