inlineEditing.managementColumn : BooleanDefault: true

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>