Modified Row Index
Column Index
Next
Update
Prev

You can create the JavaScript event handler function when data is changed. This example demonstrates how to capture the information when data is changed.

Double click on any cells and change the cell value.

var gridApp, gridRoot, dataGrid, collection, column;

function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridRoot = gridApp.getRoot();

  gridApp.setLayout(layoutStr);
  gridApp.setData(gridData);

  var menuItemSelectedHandler = function(event) {
    contextMenuHandler(event.menuItemCaption);
  }

  var layoutCompleteHandler = function(event) {
    dataGrid = gridRoot.getDataGrid();
    dataGrid.addEventListener("menuItemSelect", menuItemSelectedHandler);
    column = dataGrid.getColumns();
  }
  
  gridRoot.addEventListener("layoutComplete", layoutCompleteHandler);
  gridRoot.addEventListener("itemDataChanged", itemDataChangeHandler);
}


function itemDataChangeHandler(event) {
  var rowIndex = event.rowIndex;                // modified row number
  var columnIndex = event.columnIndex;          // modified column number
  var dataField = event.dataField;              // the data field of the modified column
  var dataRow = gridRoot.getItemAt(rowIndex);   // modified data record
  var oldValue = event.value;                   // before value
  var newValue = event.newValue;                // after value

  inputForm.changeRowIndex.value = rowIndex;
  inputForm.changeColumnIndex.value = columnIndex;
}

© 2017 KoolChart. All rights reserved.