Next
Update
Prev
Change History
Change History (XML)

You can edit the Grid data using JavaScript. This sample Grid demonstrates how to modify the Grid data (Array Object Data) from the Popup window. Please allow popup window and double click on any cells of the Actual column to modify data.

var gridApp, gridRoot, dataGrid, editRowIndex, editDataRow, editDataField;
					
function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridRoot = gridApp.getRoot();

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

  var itemDoubleClickHandler = function(event) {
    var rowIndex = event.rowIndex;
    var columnIndex = event.columnIndex;
    var dataRow = gridRoot.getItemAt(rowIndex);
    var column = dataGrid.getColumns()[columnIndex];
    var dataField = column.getDataField();
    if (columnIndex == 3) {
      editRowIndex = rowIndex;
      editDataRow = dataRow;
      editDataField = dataField;
				
      setTimeout(popupEditCell, 50);
    }
  }

  var layoutCompleteHandler = function(event) {
    dataGrid = gridRoot.getDataGrid();
    dataGrid.addEventListener("itemDoubleClick", itemDoubleClickHandler);
  }

  gridRoot.addEventListener("layoutComplete", layoutCompleteHandler);
}

function popupEditCell() {
  popupWindow = window.open("popupEdit.html", "popupEdit", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=220,height=150,top=100,left=100");
  popupWindow.focus(); 
}

function changeItem(selectedValue) {
	gridRoot.setItemFieldAt(selectedValue, editRowIndex, editDataField);
}

function getChangedData() {
  var changedData = gridRoot.getChangedData();
  if (changedData.length == 0)
    alert("No data has been changed.");
  else {
    for (var i = 0; i < changedData.length; i++)
      alert("index:"+changedData[i].idx+"\n"+"job:"+changedData[i].job+"\n"+"data:"+changedData[i].data);
  }
}

function getChangedDataXML() {
  var changedDataXML = gridRoot.getChangedDataXML();
  if (changedDataXML == null)
    alert("No data has been changed.");
  else
  alert(changedDataXML);
} 

© 2017 KoolChart. All rights reserved.