column.editor : function|booleanDefault: undefined

Provides a way to specify a custom 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: 'Nationality', 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 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: 'Nationality', 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>
     var countries = [ "Bulgaria", "Brazil", "England", "Germany", "Colombia", "Poland" ];
     $('#grid').grid({
         uiLibrary: 'bootstrap4',
         dataSource: '/Players/Get',
         columns: [
             { field: 'Name', editor: true },
             { field: 'Nationality', 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>