Next
Update
Prev
Add a row at the end
Remove All
Change History
Change History (XML)

You can edit the cell directly by either double clicking on a cell or using the context menu. This sample Grid demonstrates how to define the context menu and edit the cell data. In order to popup the context menu click the right mouse button on the row and select a menu item.

You can enable the editing mode by setting the editable attribute to true in <DataGrid>, and also disable the editing mode of a specific column by setting the editable attribute to false in <DataGridColumn>. Double click on a cell to modify the cell data. The Region and Actual columns are not allowed to be edited as the editable attribute of the Region column is set to false and the JavaScript function, itemEditBeginningChecker(), returns false for the Actual column.

...
<DataGrid editable="true" doubleClickEnabled="true" contextMenu="{cMenu}" itemEditEndJsFunction="itemEditEndChecker" selectionMode="singleCell" >
...										
    <DataGridColumn dataField="Region" editable="false" ... />
...
var gridApp, gridRoot, dataGrid, collection;
function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridApp.setLayout(layoutStr);
  gridApp.setData(gridData);
  gridRoot = gridApp.getRoot();

  var menuItemSelectedHandler = function(event) {
    contextMenuHandler(event.menuItemCaption);
  };
  var layoutCompleteHandler = function(event) {
    dataGrid = gridRoot.getDataGrid();
    dataGrid.addEventListener("menuItemSelect", menuItemSelectedHandler);
  };

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

function contextMenuHandler(caption) {
  if (caption == "Insert Row") {
    var item =   { "Region": "NorthEast", "Territory": "NewYork", "Territory_Rep": "NY", "Actual": 0, "Estimate": 0, "Real": 0, "Price": 0 };
    gridRoot.addItemAt(item, dataGrid.getSelectedIndex());
  } else if (caption == "Delete Row")
    gridRoot.removeItemAt(dataGrid.getSelectedIndex());
}

// If this function returns "false" the editing mode is not allowed otherwise, if this function returns "true" the editing mode is allowed.
function itemEditBeginningChecker(rowIndex, columnIndex, item, dataField) {
  if (dataField != "Actual")
    return true;
  else
    return false;
}

function itemEditEndChecker(rowIndex, columnIndex, item, dataField, oldValue, newValue, reason) {
  if (reason == "cancelled")
    return null;

  if (columnIndex > 3) {
    if (newValue == null || newValue == "")
      return dataField + "You must enter a value.";
    if (isNaN(Number(newValue)))
      return dataField + "You must enter only numbers.";
    if (newValue >= 100)
      return dataField + "You must enter 100 or lower values.";
  }
  return null;
}

function removeAll() {
  gridRoot.removeAll();
}

function addItem() {
  var item = { "Region": "NorthEast", "Territory": "NewYork", "Territory_Rep": "NY", "Actual": 0, "Estimate": 0, "Real": 0, "Price": 0 };
  gridRoot.addItemAt(item);
} 

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.