Add new row to the grid.
Parameters
Name | Type | Description |
---|---|---|
record | {object} | Object with data for the new record. |
Examples
without pagination
<button id="btnAdd" class="gj-button-md">Add Row</button>
<br/><br/>
<table id="grid"></table>
<script>
var grid = $('#grid').grid({
dataSource: [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
],
columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
$('#btnAdd').on('click', function () {
grid.addRow({ 'ID': grid.count(true) + 1, 'Name': 'Test Player', 'PlaceOfBirth': 'Test City, Test Country' });
});
</script>
with pagination
<button id="btnAdd" class="gj-button-md">Add Row</button>
<br/><br/>
<table id="grid"></table>
<script>
var grid = $('#grid').grid({
primaryKey: 'ID',
dataSource: [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
],
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name' },
{ field: 'PlaceOfBirth' },
{ width: 100, align: 'center', tmpl: '<i class="material-icons">delete</i>', events: { 'click': function(e) { grid.removeRow(e.data.id); } } }
],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
$('#btnAdd').on('click', function () {
grid.addRow({ 'ID': grid.count(true) + 1, 'Name': 'Test Player', 'PlaceOfBirth': 'Test City, Test Country' });
});
</script>