If set to true, add column with buttons for edit, delete, update and cancel at the end of the grid.
Examples
True
<table id="grid"></table>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria', 'DateOfBirth': '\/Date(-122954400000)\/', IsActive: false },
{ 'ID': 2, 'Name': 'Ronaldo LuÃs Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil', 'DateOfBirth': '\/Date(211842000000)\/', IsActive: false },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England', 'DateOfBirth': '\/Date(-112417200000)\/', IsActive: false },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany', 'DateOfBirth': '\/Date(512258400000)\/', IsActive: true },
{ 'ID': 5, 'Name': 'James RodrÃguez', 'PlaceOfBirth': 'Cúcuta, Colombia', 'DateOfBirth': '\/Date(679266000000)\/', IsActive: true },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria', 'DateOfBirth': '\/Date(349653600000)\/', IsActive: false }
];
grid = $('#grid').grid({
dataSource: data,
primaryKey: 'ID',
inlineEditing: { mode: 'command', managementColumn: true },
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name', editor: true },
{ field: 'PlaceOfBirth', editor: true },
{ field: 'DateOfBirth', type: 'date', editor: true },
{ field: 'IsActive', title: 'Active?', type: 'checkbox', editor: true, width: 100, align: 'center' }
]
});
</script>
False
<table id="grid"></table>
<script>
var grid, editManager, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo LuÃs Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany' },
{ 'ID': 5, 'Name': 'James RodrÃguez', 'PlaceOfBirth': 'Cúcuta, Colombia' },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria' }
];
editManager = function (value, record, $cell, $displayEl, id, $grid) {
var data = $grid.data(),
$edit = $('<button class="gj-button-md"><i class="material-icons">mode_edit</i> Edit</button>').attr('data-key', id),
$delete = $('<button class="gj-button-md"><i class="material-icons">delete</i> Delete</button>').attr('data-key', id),
$update = $('<button class="gj-button-md"><i class="material-icons">check_circle</i> Update</button>').attr('data-key', id).hide(),
$cancel = $('<button class="gj-button-md"><i class="material-icons">cancel</i> Cancel</button>').attr('data-key', id).hide();
$edit.on('click', function (e) {
$grid.edit($(this).data('key'));
$edit.hide();
$delete.hide();
$update.show();
$cancel.show();
});
$delete.on('click', function (e) {
$grid.removeRow($(this).data('key'));
});
$update.on('click', function (e) {
$grid.update($(this).data('key'));
$edit.show();
$delete.show();
$update.hide();
$cancel.hide();
});
$cancel.on('click', function (e) {
$grid.cancel($(this).data('key'));
$edit.show();
$delete.show();
$update.hide();
$cancel.hide();
});
$displayEl.empty().append($edit).append($delete).append($update).append($cancel);
}
grid = $('#grid').grid({
dataSource: data,
primaryKey: 'ID',
inlineEditing: { mode: 'command', managementColumn: false },
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name', editor: true },
{ field: 'PlaceOfBirth', editor: true },
{ width: 300, align: 'center', renderer: editManager }
]
});
</script>
Bootstrap
<table id="grid"></table>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo LuÃs Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany' },
{ 'ID': 5, 'Name': 'James RodrÃguez', 'PlaceOfBirth': 'Cúcuta, Colombia' },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria' }
];
grid = $('#grid').grid({
dataSource: data,
primaryKey: 'ID',
inlineEditing: { mode: 'command' },
uiLibrary: 'bootstrap',
columns: [
{ field: 'ID', width: 34 },
{ field: 'Name', editor: true },
{ field: 'PlaceOfBirth', editor: true }
],
pager: { limit: 3, sizes: [3, 5, 10, 20] }
});
</script>
Bootstrap 4
<table id="grid"></table>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo LuÃs Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany' },
{ 'ID': 5, 'Name': 'James RodrÃguez', 'PlaceOfBirth': 'Cúcuta, Colombia' },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria' }
];
grid = $('#grid').grid({
dataSource: data,
primaryKey: 'ID',
inlineEditing: { mode: 'command' },
uiLibrary: 'bootstrap4',
columns: [
{ field: 'ID', width: 42 },
{ field: 'Name', editor: true },
{ field: 'PlaceOfBirth', editor: true }
],
pager: { limit: 3, sizes: [3, 5, 10, 20] }
});
</script>