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 (XML-formatted Data) from the input box. 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.setDataURLEx("./Data/DataOneDepthSales.xml");

  var selectionChangeHandler = function(event) {				
    var rowIndex = event.rowIndex;				
    if (rowIndex < 0)
      return;
      
    var columnIndex = event.columnIndex;
    var dataRow = gridRoot.getItemAt(rowIndex);

    if (window.XMLSerializer)
      inputForm.itemXMLData.value = new XMLSerializer().serializeToString(dataRow);
    else
      inputForm.itemXMLData.value = dataRow.xml;
      
    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() {
  gridRoot.removeItemAt();
}

// Modify a Row
function setItemAt() {
  var item = inputForm.itemXMLData.value;
  if (item === "") {
    alert("Please select the row you want to modify and enter the data into the text field");
    return;
  }
  gridRoot.setItemAt(item, inputForm.rowIndex.value);
}

// Add a Row
function addItemAt() {
  var item = inputForm.itemXMLData.value;
  if (item === "") {
    alert("Please select the row and enter the data into the text field");
    return;
  }
  gridRoot.addItemAt(item, inputForm.rowIndex.value);
  girdMoveSelctedIndex(inputForm.rowIndex.value);
}

// Add a Row at the End
function addItem() {
  var item = inputForm.itemXMLData.value;
  if (item === "") {
    alert("Please select the row and enter the data into the text field");
    return;
  }
  gridRoot.addItemAt(item);
  girdMoveSelctedIndex();
}

// Delete All Rows
function removeAll() {
  gridRoot.removeAll();
  inputForm.rowIndex.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.