column.editor : function|booleanDefault: undefined

Provides a way to set an editing UI for the column.

Examples

Material Design

    
 <table id="grid"></table>
 <script>
     var countries = [ 'Bulgaria', 'Brazil', 'England', 'Germany', 'Colombia', 'Poland' ];
     $('#grid').grid({
         dataSource: '/Players/Get',
         columns: [
             { field: 'Name', editor: true },
             { field: 'CountryName', type: 'dropdown', editor: { dataSource: countries } },
             { field: 'DateOfBirth', type: 'date', editor: true, format: 'dd.mm.yyyy' },
             { field: 'IsActive', title: 'Active?', type:'checkbox', editor: true, mode: 'editOnly', width: 80, align: 'center' }
         ]
     });
 </script>

  

Custom With Select2

    
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 <table id="grid"></table>
 <script>
     function select2editor($editorContainer, value, record) {
         var select = $('<select><option value="Bulgaria">Bulgaria</option><option value="Brazil">Brazil</option><option value="England">England</option><option value="Germany">Germany</option><option value="Colombia">Colombia</option><option value="Poland">Poland</option></select>');
         $editorContainer.append(select);
         select.select2();
     }
     $('#grid').grid({
         dataSource: '/Players/Get',
         columns: [
             { field: 'Name', editor: true },
             { field: 'CountryName', type: 'dropdown', editor: select2editor },
             { field: 'DateOfBirth', type: 'date', editor: true, format: 'dd.mm.yyyy' },
             { field: 'IsActive', title: 'Active?', type:'checkbox', editor: true, mode: 'editOnly', width: 80, align: 'center' }
         ]
     });
 </script>

  

Bootstrap 3

    
 <table id="grid"></table>
 <script>
     var countries = [ 'Bulgaria', 'Brazil', 'England', 'Germany', 'Colombia', 'Poland' ];
     $('#grid').grid({
         uiLibrary: 'bootstrap',
         dataSource: '/Players/Get',
         columns: [
             { field: 'Name', editor: true },
             { field: 'CountryName', type: 'dropdown', editor: { dataSource: countries } },
             { field: 'DateOfBirth', type: 'date', editor: true },
             { field: 'IsActive', title: 'Active?', type:'checkbox', editor: true, mode: 'editOnly', width: 80, align: 'center' }
         ]
     });
 </script>

  

Bootstrap 4

    
 <table id="grid"></table>
 <script>
     $('#grid').grid({
         uiLibrary: 'bootstrap4',
         dataSource: '/Players/Get',
         columns: [
             { field: 'Name', editor: true },
             { field: 'CountryName', type: 'dropdown', editor: { dataSource: '/Locations/GetCountries', valueField: 'id' }, editField: 'CountryID'  },
             { field: 'DateOfBirth', type: 'date', editor: true },
             { field: 'IsActive', title: 'Active?', type:'checkbox', editor: true, mode: 'editOnly', width: 80, align: 'center' }
         ]
     });
 </script>