GridDataSet, which can be connected to GridView, provides several methods of changing the data set after it is initialized. Please refer to LoadCsvData and SetDataRows examples about how to initialize the grid data set at the beginning of the application.
In this example, we will learn how to add one or more rows or change and delete the existing rows.
Insert a new row in the specified location. The value can be transferred in an array or JSON object.
function btnInsertRow_click() {
var row = Math.max(grdMain.focusedDataRowIndex(), 0);
dsMain.insertRow(row, ['v1', 'v2', 123, 'v4']);
dsMain.insertRow(row + 1, {
field1: 'w1', field2: 'w2', field3: 321, field4: 'w4'
});
}
Add a new row after the last row. The value can be transferred in an array or JSON object. InsertRow and AppendRow will both fire onRowInserted event.
dsMain.onRowInserted = function (ds, row) {
alert(row + 'A new row has been added in the row location.');
};
Modify the values of the specified row. If strict is true, the field value transferred as undefined will not be changed. If checkDiff is true and it is the same as the existing value, it will not be changed. In other words, if checkDiff is true and the transferred values are the same as the ones in the existing row, the row will not be changed. If the row is changed actually, onRowUpdated event will be fired.
dsMain.onRowUpdated = function (ds, row) {
alert(row + 'The values of the row have been changed.');
};
btnUpdateRow_click: function () {
var row = grdMain2.focusedDataRowIndex();
if (row >= 0) {
dsMain.updateRow(row, ['xxx', 'yyy', 777, 'zzz']);
}
};
Insert several rows in the specified location at the same time. Like insertRow, each row can be an array or JSON object.
Add several rows after the last row at the same time.
Modify several consecutive rows from the specified location at the same time. If the number of the rows specified by the parameter is beyond the range of the existing rows, it will be ignored.
Please refer to GridDataSet.insertRows, GridDataSet.appendRows and GridDataSet.updateRows about the details of the multirow process event.
You can also delete one or more data rows at the same time.
Delete the specified row.
Delete one or more specified rows at the same time. In the example, it deletes the checked rows.
Please refer to GridDataSet.deleteRow and GridDataSet.deleteRows about the details of the delete event, etc.
btnDeleteRows_click: function () {
var rows = [];
var checkedRows = [];
for (var i = grdMain.rowCount(); i--;) {
var row = grdMain.getRow(i);
if (row.isChecked() && row.dataIndex() >= 0) {
checekdRows.push(row.dataIndex());
}
}
if (checkedRows.length > 0) {
dsMain.deleteRows(checkedRows);
} else {
alert('Please check the rows you want to delete.');
}
}