Region  Territory 
Territory Rep  Actual 
Estimate  Real 
Price  Row Index 
Next
Prev
Delete Row
Modify Row
Add Row
Add a row at the end
Remove All
View Change History
View 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 input boxes. Click a cell to place the row at the location of the insertion point, or click the row you want to modify or delete, then edit the input box and click the appropriate button.

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

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

  var selectionChangeHandler = function(event) {				
    var rowIndex = event.rowIndex;				
    if (rowIndex < 0)
      return;
    var columnIndex = event.columnIndex;
    var dataRow = gridRoot.getItemAt(rowIndex);
    inputForm.Region.value = dataRow["Region"];
    inputForm.Territory.value = dataRow["Territory"];
    inputForm.Territory_Rep.value = dataRow["Territory_Rep"];
    inputForm.Actual.value = dataRow["Actual"];
    inputForm.Estimate.value = dataRow["Estimate"];
    inputForm.Real.value = dataRow["Real"];
    inputForm.Price.value = dataRow["Price"];
    inputForm.rowIndex.value = rowIndex;
    var column = dataGrid.getColumns()[columnIndex];                                                    
    var dataField = column.getDataField();
  }

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

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

// Delete a Row
function removeItemAt() {
  var selectedIndex = dataGrid.getSelectedIndex();
  gridRoot.removeItemAt(selectedIndex);
}

// Modify a Row
function setItemAt() {
  var item = {
    "Region": inputForm.Region.value,
    "Territory": inputForm.Territory.value,
    "Territory_Rep": inputForm.Territory_Rep.value,
    "Actual": inputForm.Actual.value,
    "Estimate": inputForm.Estimate.value,
    "Real": inputForm.Real.value,
    "Price": inputForm.Price.value
  };
  if (inputForm.rowIndex.value === "") {
    alert("Please select the row you want to modify and enter the data into the text fields");
    return;
  }
		
  gridRoot.setItemAt(item, inputForm.rowIndex.value);
}

// Add a Row
function addItemAt() {
  var item = {
    "Region": inputForm.Region.value,
    "Territory": inputForm.Territory.value,
    "Territory_Rep": inputForm.Territory_Rep.value,
    "Actual": inputForm.Actual.value,
    "Estimate": inputForm.Estimate.value,
    "Real": inputForm.Real.value,
    "Price": inputForm.Price.value
  };

  if (inputForm.rowIndex.value === "") {
    alert("Please select a row and enter the data into the text fields");
    return;
  }
		
  gridRoot.addItemAt(item, inputForm.rowIndex.value);
  girdMoveSelctedIndex(inputForm.rowIndex.value);
}

// Add a Row at the End
function addItem() {
  var item = {
    "Region": inputForm.Region.value,
    "Territory": inputForm.Territory.value,
    "Territory_Rep": inputForm.Territory_Rep.value,
    "Actual": inputForm.Actual.value,
    "Estimate": inputForm.Estimate.value,
    "Real": inputForm.Real.value,
    "Price": inputForm.Price.value
  };
		
  if (inputForm.rowIndex.value === "") {
    alert("Please select a row and enter the data into the text fields");
    return;
  }
		
  gridRoot.addItemAt(item);
  girdMoveSelctedIndex();
}

// Delete All Rows
function removeAll() {
  gridRoot.removeAll();
  inputForm.itemXMLData.value = "";
}

// View Change History
function getChangedData() {
  var changedData = gridRoot.getChangedData();
  if (changedData.length == 0) {
    if ( gridRoot.getRemoveAllData() ) {
      alert("Remove All");
    } else
      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);
  }
}

// View Change History with XML Format
function getChangedDataXML() {
  var changedDataXML = gridRoot.getChangedDataXML();
  if (changedDataXML == null)
    if ( gridRoot.getRemoveAllData() ) {
      alert("Remove All");
    } else
      alert("No data has been changed.");
    else
      alert(changedDataXML);
}

function girdMoveSelctedIndex(idx) {
  setTimeout("function gridSetSelectedIndex("+idx+")", 100);
}

function gridSetSelectedIndex(idx) {
  var verticalScrollPosition = dataGrid.getVerticalScrollPosition();
  var rowCount = dataGrid.getRowCount();
  if (rowCount > 0)
    rowCount = rowCount - 1;
  var halfRowCount = (rowCount / 2).toFixed();

  if (idx == null || idx == undefined) {
    if (!collection)
      collection = gridRoot.getCollection();
    idx = collection.getLength() - 1;
  }
  dataGrid.setSelectedIndex(idx);
  if (idx < verticalScrollPosition || idx > verticalScrollPosition + rowCount) {
    if (idx - halfRowCount >= 0)
      dataGrid.setVerticalScrollPosition(idx - halfRowCount);
    else
      dataGrid.setVerticalScrollPosition(0);
  }
}


© 2017 KoolChart. All rights reserved.