Documentation

Configuration Object

You will find here all the properties of the configuration object ( var etConfig = { property: value }) needed to configure the EditTable object:

General

Property Type Description Remarks Example
selection boolean enables / disables selection model (default - true)   var etConfig = { selection: false }
editable boolean enables / disables inline cell editing(default - false)   var etConfig = { editable: true }
key_navigation boolean enables / disables keyboard navigation (default - true)   var etConfig = { key_navigation: false }
table_css string defines the css class of the table element (default - 'ezEditableTable') Check out the ezEditTable.css stylesheet and edit the css classes for your project's needs var etConfig = { table_css: "myclass" }
unselectable_css string defines the css class that makes the table text unselectable (default - 'ezUnselectable') Older versions of IE do not support this css class, as an alternative use unselectable="on" to expect same result var etConfig = { unselectable_css: "myclass" }
activity_indicator_css string defines the css class to be applied to the table in order to indicate server activity   var etConfig = { activity_indicator_css: "myclass" }
on_server_activity_start function callback event function called before server activity starts (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • row is the current row to be processed server-side
 var etConfig = { on_server_activity_start: function(o, row){ alert('Row data to be processed: ' + o.Selection.GetRowValues(row)); } }
on_server_activity_stop function callback event function called when server activity stopped (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • row is the current row to be processed server-side
 var etConfig = { on_server_activity_stop: function(o, row){ alert('Row data processed server-side: ' + o.Selection.GetRowValues(row)); } }
base_path string defines the path to the script's directory (default: 'ezEditTable/') This is used for the command editor icons' path var etConfig = { base_path: "myDir/" }
Top of page

Selection

Property Type Description Remarks Example
selection_model string defines the selection model: "single" or "multiple" (default: 'single') 2 possible values: 'single' or 'multiple' var etConfig = { selection_model: 'multiple' }
default_selection string defines the selection type (default: 'row') 3 possible values: 'row', 'cell' or 'both' var etConfig = { default_selection: 'both' }
key_selection boolean enables / disable multiple selection by using Ctrl and Shift keys (default: true) select multiple rows by holding Ctrl or Shift key down, only if selection model is 'multiple' var etConfig = { key_selection: false }
select_row_at_start boolean first row is selected at start if set true (default: false)   var etConfig = { select_row_at_start: true }
row_index_at_start number defines which row has to be selected at start (default: this.startRow) this.startRow = numeric parameter passed to constructor:
var et = new EditTable('myTableId', 3, etConfig);		 var etConfig = { row_index_at_start: 3 }
scroll_into_view boolean If set true selected row scrolls into view; useful when row is selected by using keyboard (default: false)   var etConfig = { scroll_into_view: true }
active_row_css string defines css class for active row (default: 'ezActiveRow')   var etConfig = { active_row_css: 'myClass' }
selected_row_css string defines css class for selected rows (default: 'ezSelectedRow')

only if 'multiple' selection model is enabled

 var etConfig = { selected_row_css: 'myClass' }
active_cell_css string defines css class for active cell (default: 'ezActiveCell') only if 'cell' or 'both' selection type is enabled var etConfig = { active_cell_css: 'myClass' };
nb_rows_per_page number defines number of rows to jump when PgDown or PgUp keys are pressed (default: 10)

specify a huge number to jump straight to 1st or last row (1000)

 var etConfig = { nb_rows_per_page: 1000 }
Top of page

Selection callback events

Property Type Description Remarks Example
on_selection_initialized function callback event function called when Selection object is initialised (default: null)

1 parameter is passed to the function:

  • o is the current EditTable object
 var etConfig = { on_selection_initialized: function(o){ alert(o.id+' Selection object is initialised!'); } }
on_before_selected_row function callback event function called before a row is selected (default: null) )

2 parameters are passed to the function:

  • o is the current EditTable object
  • row is the current row to be selected
 var etConfig = { on_before_selected_row: function(o, row){ alert('Row index: ' + row.rowIndex); } }
on_after_selected_row function callback event function called after a row is selected (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • row is the current selected row
 var etConfig = { on_after_selected_row: function(o, row){ alert('Row index: ' + row.rowIndex); } }
on_before_selected_cell function callback event function called before a cell is selected (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell to be selected
 var etConfig = { on_before_selected_cell: function(o, cell){ alert('Cell index: ' + cell.cellIndex); } }
on_after_selected_cell function callback event function called (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current selected cell
 var etConfig = { on_after_selected_cell: function(o, cell){ alert('Cell index: ' + cell.cellIndex); } }
on_before_deselected_row function callback event function called before a row is deselected (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • row is the current row to be deselected
 var etConfig = { on_before_deselected_row: function(o, row){ alert('Row index: ' + row.rowIndex); } }
on_after_deselected_row function callback event function called after a row is deselected (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • row is the current deselected row
 var etConfig = { on_after_deselected_row: function(o, row){ alert('Row index: ' + row.rowIndex); } }
on_before_deselected_cell function callback event function called before a cell is deselected (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell to be deselected
 var etConfig = { on_before_deselected_cell: function(o, cell){ alert('Cell index: ' + cell.cellIndex); } }
on_after_deselected_cell function callback event function called after a cell is deselected (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current deselected cell
 var etConfig = { on_after_deselected_cell: function(o, cell){ alert('Cell index: ' + cell.cellIndex); } }
on_validate_row function callback event function called after a row is validated by pressing enter key or on double-click (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • row is the current validated row

Note the editable property needs to be set to false

 var etConfig = { on_validate_row: function(o, row){ alert('Row index: ' + row.rowIndex); } }
on_validate_cell function callback event function called after a cell is validated by pressing enter key or on double-click (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current validated cell

Note the editable property needs to be set to false

 var etConfig = { on_validate_cell: function(o, cell){ alert('Cell index: ' + cell.cellIndex); } }
Top of page

Editable

Property Type Description Remarks Example
editor_model string defines the editor model (default: 'cell') 2 possible values: 'cell' or 'row' var etConfig = { editor_model: 'row' }
open_editor_action string defines which mouse action opens the inline editing feature (default: 'dblclick') 2 possible values: 'dblclick', 'click' var etConfig = { open_editor_action: 'click' }
ajax new boolean enables AJAX requests (default: true if jQuery is detected) it is enabled if jQuery is detected and the ajax property is not explicitly set false var etConfig = { editable: true, ajax: false }
cell_editors array array defining the editor configuration for each column (default: []) the number of editors must be equal to the number of columns. Refer to Cell editors properties for details about editors' configuration

var etConfig = { cell_editors: [
{ type: 'select' },
{ type: 'textarea' },
{ type: 'input' },
{ type: 'uploader' },
{ type: 'none' },
{ type: 'command' }
] }
input_editor_css string defines the css class for 'input' type editors (default: 'ezInputEditor')   var etConfig = { input_editor_css: 'myClass' };
textarea_editor_css string defines the css class for 'textarea' type editors (default: 'ezTextAreaEditor')   var etConfig = { textarea_editor_css: 'myClass' };
select_editor_css string defines the css class for 'input' type editors (default: 'ezSelectEditor')   var etConfig = { select_editor_css: 'myClass' };
command_editor_css string css class applied to command editor buttons container (default: 'ezCommandEditor')   var etConfig = { command_editor_css: 'myClass' };
modified_cell_css string css class applied to modified cells (default: 'ezModifiedCell') this css class shows the green small triangle in the left-upper corner of the cell var etConfig = { modified_cell_css: 'myClass' };
auto_save boolean saves automatically pending changes upon selection change editable property needs to be activated (default: true if editable is on) var etConfig = { auto_save: false };
auto_save_model string determines when modified and/or added data is saved, upon row or cell selection change (default: 'row') 2 possible values 'row' or 'cell' var etConfig = { auto_save_model: 'cell' };
auto_save_type string defines if only insertions or updates, or both are saved automatically (default: 'both') 3 possible values 'insert', 'update' or 'both' var etConfig = { auto_save_type: 'update' };
editable_on_keystroke new boolean makes the inline cell editor appear upon keystroke (default: false) only if edition is enabled and editorModel is set to 'cell' and selectionModel to 'single' var etConfig = { editable: true, editable_on_keystroke: true };
new_row_prefix string defines the prefix for new added row ids (default: 'tr') prefix should match the prefix assigned to already existing rows var etConfig = { new_row_prefix: 'row' };
form_submit_interval number defines the interval in ms separating rows data submissions (default: 50) by default the script submits a single form for each modified row. Depending on ISPs / network security policies, multiple submissions to same page are blocked by the server. This interval can be useful to fine tune the form submissions when those server restrictions apply. var etConfig = { form_submit_interval: 750 };
new_row_pos new string or number defines the row position of a newly created row (default: 'top') 2 possible values as a string: 'top' or 'bottom', and as an integer: any number >= 0 and <= total number of rows. If the supplied numeric value exceeds the total number of rows then the script fallback to default value 'top' var etConfig = { new_row_pos: 'bottom' };
Top of page

Cell editors

Property Type Description Remarks Example
type string sets the editor type (default: 'input') these are the editor types: 'none', 'input', 'textarea', 'select', 'multiple', 'boolean', 'command', 'custom', 'uploader' var etConfig = { cell_editors: [
{ type: 'select' },
{ type: 'textarea' },
{ type: 'input' },
{ type: 'uploader' },
{ type: 'none' },
{ type: 'command' }
]}
css string defines a css class for the editor (default: null)   var etConfig = { cell_editors: [
{ type: 'select', css:'myClass' },...
]}
attributes array defines the additional attributes for the editor's DOM element (default: null) useful for specifying the max length of characters for input and textarea types var etConfig = { cell_editors: [
{ type: 'input', attributes:[['maxLength',5],['title','5 chars max']] },...
]}
style string sets the inline style for the editor's DOM element (default: null)   var etConfig = { cell_editors: [
{ type: 'textarea', style: 'background-color:#fff;' },...
]}
custom_slc_options array defines the options of a 'select' editor type (default: null) this property applies only to 'select' and 'multiple' editors { type: 'multiple', custom_slc_options:['a','b','c'], sort_slc_options: 'string', values_separator: ', ' }, var etConfig = { cell_editors: [
{ type: 'select', custom_slc_options:['a','b','c'] },...
]}
custom_slc_values array defines the options values of a 'select' editor type (default: null) this property applies only to 'select' and 'multiple' editors { type: 'multiple', custom_slc_options:['a','b','c'], custom_slc_values:['1','2','3'], sort_slc_options: 'string', values_separator: ', ' }, var etConfig = { cell_editors: [
{ type: 'select', custom_slc_options:['a','b','c'], custom_slc_values:['1','2','3'] },...
]}
sort_slc_options string sorts the custom options (default: null)

this property applies only to 'select' and 'multiple' editors. 3 possible values:

  • 'string': sorts string values
  • 'numasc': sorts numeric values in ascending manner
  • 'numdesc': sorts numeric values in descending manner
 var etConfig = { cell_editors: [
{ type: 'select', custom_slc_options:['a','b','c'], sort_slc_options: 'string' },...
]}
values_separator string defines the value separator for 'multiple' type editors (default: ', ') this property applies only to 'multiple' editors var etConfig = { cell_editors: [
{ type: 'multiple', custom_slc_options:['a','b','c'], sort_slc_options: 'string', values_separator: '; ' },...
]}
allow_empty_value boolean defines the columns accepting empty values (default: false) var etConfig = { cell_editors: [
{ type: 'input', allow_empty_value:true },...
]}
target string defines the custom editor target element id (default: 'null') this property applies only to 'custom' editors var etConfig = { cell_editors: [
{ type: 'custom', target: 'datePick' },...
]}
command_column_index number tells the script in which column command buttons have to be generated (default: this.nbCells-1) this property applies only to 'command' editors. Default value is the last column of the table var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4 },...
]}
buttons object

this literal object is the configuration object of the command buttons generated in column (default: {})

 this property applies only to 'command' editors. Refer to Command buttons properties for details about 'command' editor buttons configuration

var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4,
buttons:{
enable: ['update', 'insert', 'delete', 'submit', 'cancel'],
'update': { title:'Edit row' },
'insert': { title:'Add row', scrollIntoView: false },
'delete': { title:'Delete row' },
'submit': { text:'Save', title:'Save' },
'cancel': { text:'Cancel', title:'Cancel' } }
},...
]}
Top of page

Command buttons

Property Type Description Remarks Example
enable array enables the command buttons to be generated (default: ['update', 'insert', 'delete', 'submit', 'cancel']) command buttons types: 'update', 'insert', 'delete', 'submit', 'cancel'. To disable a particular button remove it from the array var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4,
buttons:{
enable: ['update', 'submit', 'cancel'],
'update': { title:'Edit row' },
'submit': { text:'Save', title:'Save' },
'cancel': { text:'Cancel', title:'Cancel' } }
},...
]}
update object configuration object of the 'update' button (default: {})

Below a list of the properties for the 'update' button:

  • 'text': text of the button (default: '')
  • 'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif" alt="" />')
  • 'title': tooltip for the button (default: 'Edit record')
  • 'css': additional css class (default: null)
  • 'style': inline style element (default: null)
 var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4,
buttons:{
enable: ['update'],
'update': { text:'Edit', title:'Edit row', css:'myClass'}},...
]}
insert object configuration object of the 'insert' button (default: {})

Below a list of the properties for the 'insert' button:

  • 'text': text of the button (default: '')
  • 'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif" alt="" />')
  • 'title': tooltip for the button (default: 'Create record')
  • 'css': additional css class (default: null)
  • 'style': inline style element (default: null)
  • 'scrollIntoView': scrolls into view inserted row (default: false)
 var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4,
buttons:{
enable: ['insert'],
'insert': { text:'Add', title:'Add row', css:'myClass'}},...
]}
delete object configuration object of the 'delete' button (default: {})

Below a list of the properties for the 'delete' button:

  • 'text': text of the button (default: '')
  • 'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif" alt="" />')
  • 'title': tooltip for the button (default: 'Delete record')
  • 'css': additional css class (default: null)
  • 'style': inline style element (default: null)
 var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4,
buttons:{
enable: ['delete'],
'delete': { text:'Remove', title:'Remove row', css:'myClass'}},...
]}
submit object configuration object of the 'submit' button (default: {})

Below a list of the properties for the 'submit' button:

  • 'text': text of the button (default: 'Submit')
  • 'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif" alt="" />')
  • 'title': tooltip for the button (default: 'Submit record')
  • 'css': additional css class (default: null)
  • 'style': inline style element (default: null)
 var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4,
buttons:{
enable: ['submit'],
'submit': { text:'Save', title:'Save row', css:'myClass'}},...
]}
cancel object configuration object of the 'cancel' button (default: {})

Below a list of the properties for the 'cancel' button:

  • 'text': text of the button (default: 'Cancel')
  • 'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif" alt="" />')
  • 'title': tooltip for the button (default: 'Cancel')
  • 'css': additional css class (default: null)
  • 'style': inline style element (default: null)
 var etConfig = { cell_editors: [
{ type: 'command', command_column_index: 4,
buttons:{
enable: ['cancel'],
'cancel': { css:'myClass'}},...
]}
Top of page

Uploader editor

Property Type Description Remarks Example
uploader object defines the uploader editor settings (default: {})   ...cell_editors:[ { type: 'uploader', uploader: { uri: 'php/uploadFile.php', path: 'images/uploads/', max_file_size: '51200', show_link: false } },... ]
uri string defines the URL of the resource performing the upload operation (default: null)   ...cell_editors:[ { type: 'uploader', uploader: { uri: 'php/uploadFile.php' } },... ]
path string defines the path to the uploads folder repository (default: null)   ...cell_editors:[ { type: 'uploader', uploader: { path: 'images/uploads/' } },... ]
show_upload boolean shows or hides uploaded file (default: true)   ...cell_editors:[ { type: 'uploader', uploader: { show_upload: false } },... ]
sql_field string defines the name of the SQL field name storing upload filename (default: 'IMAGENAME') optional depending on how the upload server-side operation is implemented. On the script's website, the name of the SQL field storing the filename is rerquired by the PHP resource. This does not mean that it is a good practice, it is just for demoing purposes. ...cell_editors:[ { type: 'uploader', uploader: { sql_field: 'FILENAME' } },... ]
record_id_column_index number tells the script which is the index of the column containing the record id (default: null) optional depending on how the id of a record is used in the HTML table. If this property is defined, the script will use it in order to retrieve the record id of working row. Otherwise, it will extract it from the id of the working row, by default 'tr'+Id. ...cell_editors:[ { type: 'uploader', uploader: { record_id_column_index: 0 } },... ]
show_link boolean Uploaded file appears as a link in the uploader box and in the cell if set true (default: true)   ...cell_editors:[ { type: 'uploader', uploader: { show_link: false } },... ]
link_css string defines the css class for the upload link (default: '')   ...cell_editors:[ { type: 'uploader', uploader: { show_link: true, link_css: 'myClass' } },... ]
loader_image string defines the path of the loader image displayed during the upload operation (default: this.basePath + 'themes/img_loader.gif')   ...cell_editors:[ { type: 'uploader', uploader: { loader_image: 'myFolder/loader.gif' } },... ]
ok_image string sets the path of the image used to notify users that cell contains an uploaded file (default: this.basePath + 'themes/img_loader.gif') If show_upload is active and show_link property is set false this property applies. ...cell_editors:[ { type: 'uploader', uploader: { ok_image: 'myFolder/ok.gif' } },... ]
max_file_size number sets the maximum file size allowed, default value is 100Kb (default: 102400) Optional depending on the server-side implementation. This value is passed to the server in the online script's demos. ...cell_editors:[ { type: 'uploader', uploader: { max_file_size: 51200 } },... ]
valid_extensions string sets a list of comma separated file extensions to pass to the server logic (default: 'jpg, jpeg, gif, png') Optional depending on the server-side implementation. This value is passed to the server in the online script's demos. ...cell_editors:[ { type: 'uploader', uploader: { valid_extensions: 'doc,docx,pdf,rtf' } },... ]
css string defines the css class applied to the uploader container element (default: 'ezUploaderEditor') ...cell_editors:[ { type: 'uploader', uploader: { css: 'myClass' } },... ]
output_css string defines the css class applied to the uploader output messages container (default: 'ezUploaderEditorOutput') ...cell_editors:[ { type: 'uploader', uploader: { output_css: 'myClass' } },... ]
display_css string defines the css class applied to the image displayer container (default: 'ezUploaderEditorOutput') ...cell_editors:[ { type: 'uploader', uploader: { output_css: 'myClass' } },... ]
javascript_code_success string defines javascript code to be injected by the server after a successfull upload operation (default: '<script>window.parent["{1}"].SetUploadSuccess(true); window.parent["{1}"].SetUploadName("{0}");' + 'window.parent["{1}"].ShowUpload();</script>') Optional depending on server-side implementation. This value is passed to the server in the online script's demos. ...cell_editors:[ { type: 'uploader', uploader: { javascript_code_success: '<script>alert('Upload name: {0}');</script>' } },... ]
Top of page

Editable and cell editors callback events and delegates

Property Type Description Remarks Example
on_editable_initialized function callback event function called when Editable object is initialised (default: null)

1 parameter is passed to the function:

  • o is the current EditTable object
 var etConfig = { on_editable_initialized: function(o){ alert(o.id+ ' Editable object is initialised!'); } }
on_before_open_editor function callback event function called before a cell editor is opened (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell
  • editor is the current opened editor
 var etConfig = { on_before_open_editor: function(o, cell, editor){ cell.style.backgroundColor = 'pink'; } }
on_after_open_editor function callback event function called after a cell editor is opened (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell
  • editor is the current opened editor
 var etConfig = { on_after_open_editor: function(o, cell, editor){ cell.style.backgroundColor = 'transparent'; } }
on_before_close_editor function callback event function called before a cell editor is closed (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell
  • editor is the current opened editor
 var etConfig = { on_before_close_editor: function(o, cell, editor){ cell.style.backgroundColor = 'pink'; } }
on_after_close_editor function callback event function called after a cell editor is closed (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell
  • editor is the current opened editor
 var etConfig = { on_after_close_editor: function(o, cell, editor){ cell.style.backgroundColor = 'transparent'; } }
set_custom_editor_value function delegate function called to set 'custom' editor value (default: null)

4 parameters are passed to the function:

  • o is the current EditTable object
  • editor is the current opened editor
  • colIndex is the column index
  • val is the value to set in the custom editor
 var etConfig = { set_custom_editor_value: function(o, editor, colIndex, val){ alert('Value to set in custom editor:' + val); } }
get_custom_editor_value function delegate function called to get 'custom' editor value (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • editor is the current opened editor
  • colIndex is the column index
 var etConfig = { get_custom_editor_value: function(o, editor, colIndex){ alert('Call function to retrieve custom editor value for column '+colIndex); } }
set_cell_modified_value function delegate function called to write modified value in cell (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell
  • val is the value to write in the cell
 var etConfig = { set_cell_modified_value: function(o, cell, val){ alert('This value has to be written in the cell: ' + val); } }
validate_modified_value function delegate function called to validate modified value to be written in cell (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • colIndex is the column index
  • cellVal is the cell value
  • edtVal is the editor value
  • cell is the current cell
  • editor is the current editor

The validation delegate must return a boolean

 var etConfig = { validate_modified_value: function(o, colIndex, cellVal, edtVal, cell, editor){ alert('Validation function returns a boolean'); } }
open_custom_editor function delegate function called to open 'custom' editor (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell
  • editor is the current opened editor
 var etConfig = { open_custom_editor: function(o, cell, editor){ alert('Custom editor for column '+cell.cellIndex+' is being opened!'); } }
close_custom_editor function delegate function called to close 'custom' editor (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • cell is the current cell
  • editor is the current opened editor
 var etConfig = { close_custom_editor: function(o, cell, editor){ alert('Custom editor for column '+cell.cellIndex+' is closed!'); } }
show_upload function delegate function called by uploader editor to display uploaded file (default: null)

4 parameters are passed to the function:

  • o is the current EditTable object
  • divUplDisplay is the container element containing the upload
  • uploadName is the filename of the uploaded file
  • path is the upload path
 var etConfig = { cell_editors:[ { type: 'uploader', uploader: { show_upload: function(o, divUplDisplay, uploadName, path){ divUplDisplay.style.display = ''; divUplDisplay.innerHTML = uploadName; } } }] }
on_before_open function callback called before uploader editor is opened (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • editor is the current opened uploader editor
  • cell is the current cell
 var etConfig = { cell_editors:[ { type: 'uploader', uploader: { on_before_open: function(o, editor, cell){ alert('uploader is going to be opened'); } } }] }
on_after_open function callback called after uploader editor is opened (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • editor is the current opened uploader editor
  • cell is the current cell
 var etConfig = { cell_editors:[ { type: 'uploader', uploader: { on_after_open: function(o, editor, cell){ alert('uploader is opened now'); } } }] }
on_before_close function callback called before uploader editor is closed (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • editor is the current opened uploader editor
  • cell is the current cell
 var etConfig = { cell_editors:[ { type: 'uploader', uploader: { on_before_close: function(o, editor, cell){ alert('uploader is going to be closed'); } } }] }
on_after_close function callback called after uploader editor is closed (default: null)

3 parameters are passed to the function:

  • o is the current EditTable object
  • editor is the current opened uploader editor
  • cell is the current cell
 var etConfig = { cell_editors:[ { type: 'uploader', uploader: { on_after_close: function(o, editor, cell){ alert('uploader is closed now'); } } }] }
Top of page

Actions

Property Type Description Remarks Example
actions object server actions configuration object (default: {})   

var etConfig = {
actions:{
'update': {
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] },
'insert': {
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] },
'delete': {
uri: 'script.delete.php', submit_method: 'script', bulk_delete: true }
}
}
update object 'update' action configuration object (default: {})

Below the list of properties for the 'update' actions:

  • uri: server-side page
  • form_method: 2 possible values 'form' or 'script'
  • submit_method: 'POST' or 'GET' requests, if form_method is script only GET requests
  • param_names: collection of parameters expected by the server-side page (uri property)
 var etConfig = {
actions:{
'update': {
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] } }
}
insert object 'insert' action configuration object (default: {})

Below the list of properties for the 'insert' actions:

  • uri: server-side page
  • form_method: 2 possible values 'form' or 'script'
  • submit_method: 'POST' or 'GET' requests, if form_method is script only GET requests
  • param_names: collection of parameters expected by the server-side page (uri property)
  • default_record: collection of values to add when a row is added to table (insert command button)

var etConfig = {
actions:{
'insert': {
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'],
default_record: ['', 'New country', 'New country', 'XXX', '0']} }
}
delete object 'delete' action configuration object  (default: {})

Below the list of properties for the 'update' actions:

  • uri: server-side page
  • form_method: 2 possible values 'form' or 'script'
  • submit_method: 'POST' or 'GET' requests, if form_method is script only GET requests
  • param_names: collection of parameters expected by the server-side page (uri property)
  • bulk_delete: enables multiple rows deletion operations
 var etConfig = {
actions:{
'delete': {
uri: 'script.delete.php', submit_method: 'script', bulk_delete: true } } }

Actions callback events

Property Type Description Remarks Example
on_update_submit function delegate function called for submitting modified data to server (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • treated rows: array of modified rows objects


var etConfig = {
actions:{
'update': {
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
on_update_submit: function(o, treatedRows){ alert(treatedRows); }
} } } }
on_insert_submit function delegate function called for submitting inserted data to server (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • treated rows: array of inserted rows objects
 var etConfig = {
actions:{
'insert': {
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
on_insert_submit: function(o, treatedRows){ alert(treatedRows); }
} } } }
on_delete_submit function delegate function called for submitting deleted data to server (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • treated rows: array of deleted rows objects
var etConfig = {
actions:{
'delete': {
uri: 'script.delete.php', submit_method: 'script', bulk_delete: false,
on_delete_submit: function(o, treatedRows){ alert(treatedRows); }
} } } }
on_before_submit function callback function called before data is sent to server (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • treated rows: array of modified rows objects

var etConfig = {
actions:{
'update': {
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
on_before_submit: function(o, modifiedRows){ alert('before update'); }
},
'insert': {
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
on_before_submit: function(o, modifiedRows){ alert('before insert'); }
},
'delete': {
uri: 'script.delete.php', submit_method: 'script', bulk_delete: false,
on_before_submit: function(o, modifiedRows){ alert('before delete'); } } } }
on_after_submit function callback function called after data is sent to server (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • treated rows: array of modified rows objects
 var etConfig = {
actions:{
'update': {
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
on_after_submit: function(o, modifiedRows){ alert('before update'); }
},
'insert': {
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
on_after_submit: function(o, modifiedRows){ alert('before insert'); }
},
'delete': {
uri: 'script.delete.php', submit_method: 'script', bulk_delete: false,
on_after_submit: function(o, modifiedRows){ alert('before delete'); } } }
on_submit_error function callback function called when error occurs when data is sent to server (default: null)

2 parameters are passed to the function:

  • o is the current EditTable object
  • e is the error object
  • desc is the error object description
 
var etConfig = {
        actions: {
            'update': {
                uri: 'updateRow.php',
                submit_method: 'form',
                form_method: 'POST',
                on_submit_error: function (o, e, desc) {
                    alert('An error occured');
                }
            },
            'insert': {

                uri: 'insertRow.php',
                submit_method: 'form',
                form_method: 'POST',

                on_submit_error: function (o, e, desc) {
                    alert('An error occured');
                }
            },
            'delete': {
                uri: 'script.delete.php',
                submit_method: 'script',
                bulk_delete: false,
                on_submit_error: function (o, e, desc) {
                    alert('An error occured');
                }
            }
        }
check_response_sanity new function callback function called when the AJAX request returns a response object usually in JSON format. This delegate checks the sanity of the response object and returns a boolean (default: null)

This callback is invoked only when ajax is on.

1 parameter is passed to the function:

  • data: response object, usually in JSON format
 
actions: {
    'update': {
        uri: 'php/json.update.record.php',
        form_method: 'POST',
        param_names: [
        	'id', 'name', 'email', 'startdate', 'salary'
        ],
        check_response_sanity: function (data) {
            return (data && data.hasOwnProperty('result') &&
                data.result.hasOwnProperty('success'));
        }
    },
    'insert': {
        uri: 'php/json.insert.record.php',
        form_method: 'POST',
        param_names: [
        	'id', 'name', 'email', 'startdate', 'salary'
        ],
        default_record: [
        	'', 'Employee name...', 
        	'employee@email.com', '2011-01-01', 
        	'0.00'
        ],
        check_response_sanity: function (data) {
            return (data && data.hasOwnProperty('result') &&
                data.result.hasOwnProperty('success'));
        }
    },
    'delete': {
        uri: 'php/json.delete.record.php',
        form_method: 'POST',
        bulk_delete: false,
        param_names: ['id'],
        check_response_sanity: function (data) {
            return (data && data.hasOwnProperty('result') &&
                data.result.hasOwnProperty('success'));
        }
    }
};
process_response new function callback function called when the AJAX request returns a response object usually in JSON format. This delegate gives the possibility to add custom processing of the response object (default: null)

This callback is invoked only when ajax is on.

1 parameter is passed to the function:

  • data: response object, usually in JSON format
 
actions: {
    'update': {
        uri: 'php/json.update.record.php',
        form_method: 'POST',
        param_names: [
        	'id', 'name', 'email', 'startdate', 'salary'
        ],
        process_response: function (data) {
        	alert(data.result.description);
        }
    },
    'insert': {
        uri: 'php/json.insert.record.php',
        form_method: 'POST',
        param_names: [
        	'id', 'name', 'email', 'startdate', 'salary'
        ],
        default_record: [
        	'', 'Employee name...', 
        	'employee@email.com', '2011-01-01', 
        	'0.00'
        ],
        process_response: function (data) {
            alert(data.result.description + 
            	' ('+ data.result.id +')');
        }
    },
    'delete': {
        uri: 'php/json.delete.record.php',
        form_method: 'POST',
        bulk_delete: false,
        param_names: ['id'],
        process_response: function (data) {
            alert(data.result.description + 
            	' ('+ data.result.id +')');
        }
    }
};

Messages

Property Type Description Remarks Example
msg_submit_ok string text displayed when data was successfully sent to the server (default: 'Modified rows were successfully submitted to server!') 

 

 var etConfig = { msg_submit_ok: 'Data saved successfully!'}
msg_confirm_delete_selected_rows string text displayed to ask confirmation for deleting operation (default: ''Do you want to delete the selected row(s)?'')    var etConfig = { msg_confirm_delete_selected_rows: 'Are you sure you want to delete selected rows?' }
msg_error_occured string text displayed when an error occurs in general (default: 'An error occured!')    var etConfig = { msg_error_occured: 'Error!' }
msg_submit_unsuccessful string text displayed when an error occurs when data is sent to server (default: 'Modified rows could not be saved correctly!')    var etConfig = { msg_submit_unsuccessful: 'Data could not be saved correctly!' }
undefined_submit_url string text displayed when data cannot be sent to server because URI is missing (default: 'Modified rows could not be saved! Submit URL is not defined')    var etConfig = { msg_filter: 'Please provide a URL to which submit data!' }
Top of page