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: -
|
- 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: - - -
|
- 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/" } |
-
- - - -
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 } |
-
- - -
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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
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: -
Note the editable property needs to be set to false - - |
- var etConfig = { on_validate_cell: function(o, cell){
- alert('Cell index: ' + cell.cellIndex); } } |
-
- - - -
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 | -
|
-
| 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' }; |
-
- - -
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: [ |
-
| css | -string | -defines a css class for the editor (default: null) | -- | var etConfig = { cell_editors: [ |
-
| 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: [ |
-
| style | -string | -sets the inline style for the editor's DOM element (default: null) | - -- | var etConfig = { cell_editors: [ |
-
| 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: [ |
-
| 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: [ |
-
| sort_slc_options | -string | -sorts the custom options (default: null) | -this property applies only to 'select' and 'multiple' editors. - 3 possible values: -
|
- var etConfig = { cell_editors: [ |
-
| values_separator | -string | -defines the value separator for 'multiple' type editors (default: - ', ') | -this property applies only to 'multiple' editors | - -var etConfig = { cell_editors: [ |
-
| allow_empty_value | -boolean | - -defines the columns accepting empty values (default: false) | -- | var etConfig = { cell_editors: [ |
-
| target | -string | -defines the custom editor target element id (default: 'null') | -this property applies only to 'custom' editors | -var etConfig = { cell_editors: [ |
-
| 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: [ |
-
| 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 | -
|
-
- - -
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: [ |
-
| update | - -object | -configuration object of the 'update' button (default: {}) | -Below a list of the properties for the 'update' button: -
|
- var etConfig = { cell_editors: [},... |
-
| insert | -object | -configuration object of the 'insert' button (default: {}) | -Below a list of the properties for the 'insert' button: -
|
- var etConfig = { cell_editors: [},... |
-
| delete | -object | -configuration object of the 'delete' button (default: {}) | -Below a list of the properties for the 'delete' button: -
|
- var etConfig = { cell_editors: [},... |
-
| submit | -object | -configuration object of the 'submit' button (default: {}) | -Below a list of the properties for the 'submit' button: -
|
- var etConfig = { cell_editors: [},... |
-
| cancel | -object | - -configuration object of the 'cancel' button (default: {}) | -Below a list of the properties for the 'cancel' button: -
|
- var etConfig = { cell_editors: [},... |
-
- - -
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>' }
- },...
- ]
- |
-
- - -
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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- 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: -
|
- var etConfig = {
- cell_editors:[
- {
- type: 'uploader',
- uploader: {
- on_after_close: function(o, editor, cell){
- alert('uploader is closed now');
- }
- }
- }]
- } |
-
- - -
Actions
- - -| Property | -Type | -Description | -Remarks | - -Example | -
|---|---|---|---|---|
| actions | -object | -server actions configuration object (default: {}) | - -- |
|
-
| update | -object | -'update' action configuration object (default: {}) | - -Below the list of properties for the 'update' actions: -
|
- var etConfig = {} |
-
| insert | -object | -'insert' action configuration object (default: {}) | -Below the list of properties for the 'insert' actions: - -
|
-
|
-
| delete | -object | - -'delete' action configuration object (default: {}) | -Below the list of properties for the 'update' actions: -
|
- var etConfig = {} |
-
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: - -
|
-
|
-
| on_insert_submit | - -function | -delegate function called for submitting inserted data to server - (default: null) | -2 parameters are passed to the function: -
|
- var etConfig = { |
-
| on_delete_submit | -function | -delegate function called for submitting deleted data to server - (default: null) | -2 parameters are passed to the function: - -
|
- |
-
| on_before_submit | - -function | -callback function called before data is sent to server (default: - null) | -2 parameters are passed to the function: -
|
-
|
-
| on_after_submit | -function | - -callback function called after data is sent to server (default: - null) | -2 parameters are passed to the function: -
|
-
- var etConfig = { } |
-
| 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: -
|
-
-
-
-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 1 parameter is passed to the function: -
|
-
-
-
-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 1 parameter is passed to the function: -
|
-
-
-
-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!' } |
-
- - -
';
- this.cmdInsertBtnIcon = this.cmdInsertBtn.hasOwnProperty('icon') ? this.cmdInsertBtn.icon : '
';
- this.cmdDeleteBtnIcon = this.cmdDeleteBtn.hasOwnProperty('icon') ? this.cmdDeleteBtn.icon : '
';
- this.cmdSubmitBtnIcon = this.cmdSubmitBtn.hasOwnProperty('icon') ? this.cmdSubmitBtn.icon : '';
- this.cmdCancelBtnIcon = this.cmdCancelBtn.hasOwnProperty('icon') ? this.cmdCancelBtn.icon : '';
-
- this.cmdUpdateBtnCss = this.cmdUpdateBtn.hasOwnProperty('css') ? this.cmdUpdateBtn.css : null;
- this.cmdInsertBtnCss = this.cmdInsertBtn.hasOwnProperty('css') ? this.cmdInsertBtn.css : null;
- this.cmdDeleteBtnCss = this.cmdDeleteBtn.hasOwnProperty('css') ? this.cmdDeleteBtn.css : null;
- this.cmdSubmitBtnCss = this.cmdSubmitBtn.hasOwnProperty('css') ? this.cmdSubmitBtn.css : null;
- this.cmdCancelBtnCss = this.cmdCancelBtn.hasOwnProperty('css') ? this.cmdCancelBtn.css : null;
-
- this.cmdUpdateBtnStyle = this.cmdUpdateBtn.hasOwnProperty('style') ? this.cmdUpdateBtn.style : null;
- this.cmdInsertBtnStyle = this.cmdInsertBtn.hasOwnProperty('style') ? this.cmdInsertBtn.style : null;
- this.cmdDeleteBtnStyle = this.cmdDeleteBtn.hasOwnProperty('style') ? this.cmdDeleteBtn.style : null;
- this.cmdSubmitBtnStyle = this.cmdSubmitBtn.hasOwnProperty('style') ? this.cmdSubmitBtn.style : null;
- this.cmdCancelBtnStyle = this.cmdCancelBtn.hasOwnProperty('style') ? this.cmdCancelBtn.style : null;
-
- this.cmdInsertBtnScroll = this.cmdInsertBtn.hasOwnProperty('scrollIntoView') ? this.cmdInsertBtn.scrollIntoView : false; //scroll new added row into view
-
- //Editor callbacks, delegates
- this.onEditableInit = this.IsFn(f.on_editable_initialized) ? f.on_editable_initialized : null;
- this.onBeforeOpenEditor = this.IsFn(f.on_before_open_editor) ? f.on_before_open_editor : null;
- this.onAfterOpenEditor = this.IsFn(f.on_after_open_editor) ? f.on_after_open_editor : null;
- this.onBeforeCloseEditor = this.IsFn(f.on_before_close_editor) ? f.on_before_close_editor : null;
- this.onAfterCloseEditor = this.IsFn(f.on_after_close_editor) ? f.on_after_close_editor : null;
- this.setCustomEditorValue = this.IsFn(f.set_custom_editor_value) ? f.set_custom_editor_value : null;
- this.getCustomEditorValue = this.IsFn(f.get_custom_editor_value) ? f.get_custom_editor_value : null;
- this.setCellModifiedValue = this.IsFn(f.set_cell_modified_value) ? f.set_cell_modified_value : null;
- this.validateModifiedValue = this.IsFn(f.validate_modified_value) ? f.validate_modified_value : null;
- this.openCustomEditor = this.IsFn(f.open_custom_editor) ? f.open_custom_editor : null;
- this.closeCustomEditor = this.IsFn(f.close_custom_editor) ? f.close_custom_editor : null;
- this.onAddedDomRow = this.IsFn(f.on_added_dom_row) ? f.on_added_dom_row : null;
-
- //Server actions config
- this.actions = this.IsObj(f.actions) ? f.actions : {};
- this.updateConfig = this.actions['update']!==undefined ? this.actions['update'] : {};
- this.insertConfig = this.actions['insert']!==undefined ? this.actions['insert'] : {};
- this.deleteConfig = this.actions['delete']!==undefined ? this.actions['delete'] : {};
- this.updateURI = this.updateConfig.hasOwnProperty('uri') ? this.updateConfig['uri'] : null;
- this.insertURI = this.insertConfig.hasOwnProperty('uri') ? this.insertConfig['uri'] : null;
- this.deleteURI = this.deleteConfig.hasOwnProperty('uri') ? this.deleteConfig['uri'] : null;
- this.updateFormMethod = this.updateConfig.hasOwnProperty('form_method') ? this.updateConfig['form_method'].LCase() : 'post';
- this.insertFormMethod = this.insertConfig.hasOwnProperty('form_method') ? this.insertConfig['form_method'].LCase() : 'post';
- this.deleteFormMethod = this.deleteConfig.hasOwnProperty('form_method') ? this.deleteConfig['form_method'].LCase() : 'post';
- this.updateSubmitMethod = this.updateConfig.hasOwnProperty('submit_method') ? this.updateConfig['submit_method'].LCase() : this.ajax ? 'ajax': 'form';
- this.insertSubmitMethod = this.insertConfig.hasOwnProperty('submit_method') ? this.insertConfig['submit_method'].LCase() : this.ajax ? 'ajax': 'form';
- this.deleteSubmitMethod = this.deleteConfig.hasOwnProperty('submit_method') ? this.deleteConfig['submit_method'].LCase() : this.ajax ? 'ajax': 'form';
- this.bulkDelete = this.deleteConfig.hasOwnProperty('bulk_delete') ? this.deleteConfig['bulk_delete'] : false; //enables delete of selected rows
- this.defaultRecord = this.insertConfig.hasOwnProperty('default_record')
- && this.IsArray(this.insertConfig['default_record']) ? this.insertConfig['default_record'] : null;
- this.updateParams = this.updateConfig.hasOwnProperty('param_names')
- && this.IsArray(this.updateConfig['param_names']) ? this.updateConfig['param_names'] : null;
- this.insertParams = this.insertConfig.hasOwnProperty('param_names')
- && this.IsArray(this.insertConfig['param_names']) ? this.insertConfig['param_names'] : null;
- this.deleteParams = this.deleteConfig.hasOwnProperty('param_names')
- && this.IsArray(this.deleteConfig['param_names']) ? this.deleteConfig['param_names'] : null;
-
- //Server actions delegates and callbacks
- this.onUpdateSubmit = this.updateConfig.hasOwnProperty('on_update_submit')
- && this.IsFn(this.updateConfig['on_update_submit']) ? this.updateConfig['on_update_submit'] : null;
- this.onInsertSubmit = this.insertConfig.hasOwnProperty('on_insert_submit')
- && this.IsFn(this.insertConfig['on_insert_submit']) ? this.insertConfig['on_insert_submit'] : null;
- this.onDeleteSubmit = this.deleteConfig.hasOwnProperty('on_delete_submit')
- && this.IsFn(this.deleteConfig['on_delete_submit']) ? this.deleteConfig['on_delete_submit'] : null;
- this.onBeforeUpdateSubmit = this.updateConfig.hasOwnProperty('on_before_submit')
- && this.IsFn(this.updateConfig['on_before_submit']) ? this.updateConfig['on_before_submit'] : null;
- this.onBeforeInsertSubmit = this.insertConfig.hasOwnProperty('on_before_submit')
- && this.IsFn(this.insertConfig['on_before_submit']) ? this.insertConfig['on_before_submit'] : null;
- this.onBeforeDeleteSubmit = this.deleteConfig.hasOwnProperty('on_before_submit')
- && this.IsFn(this.deleteConfig['on_before_submit']) ? this.deleteConfig['on_before_submit'] : null;
- this.onAfterUpdateSubmit = this.updateConfig.hasOwnProperty('on_after_submit')
- && this.IsFn(this.updateConfig['on_after_submit']) ? this.updateConfig['on_after_submit'] : null;
- this.onAfterInsertSubmit = this.insertConfig.hasOwnProperty('on_after_submit')
- && this.IsFn(this.insertConfig['on_after_submit']) ? this.insertConfig['on_after_submit'] : null;
- this.onAfterDeleteSubmit = this.deleteConfig.hasOwnProperty('on_after_submit')
- && this.IsFn(this.deleteConfig['on_after_submit']) ? this.deleteConfig['on_after_submit'] : null;
- this.onUpdateError = this.updateConfig.hasOwnProperty('on_submit_error')
- && this.IsFn(this.updateConfig['on_submit_error']) ? this.updateConfig['on_submit_error'] : null;
- this.onInsertError = this.insertConfig.hasOwnProperty('on_submit_error')
- && this.IsFn(this.insertConfig['on_submit_error']) ? this.insertConfig['on_submit_error'] : null;
- this.onDeleteError = this.deleteConfig.hasOwnProperty('on_submit_error')
- && this.IsFn(this.deleteConfig['on_submit_error']) ? this.deleteConfig['on_submit_error'] : null;
- this.checkUpdateResponseSanity = this.updateConfig.hasOwnProperty('check_response_sanity')
- && this.IsFn(this.updateConfig['check_response_sanity']) ? this.updateConfig['check_response_sanity'] : null;
- this.checkInsertResponseSanity = this.insertConfig.hasOwnProperty('check_response_sanity')
- && this.IsFn(this.insertConfig['check_response_sanity']) ? this.insertConfig['check_response_sanity'] : null;
- this.checkDeleteResponseSanity = this.deleteConfig.hasOwnProperty('check_response_sanity')
- && this.IsFn(this.deleteConfig['check_response_sanity']) ? this.deleteConfig['check_response_sanity'] : null;
- this.processUpdateResponse = this.updateConfig.hasOwnProperty('process_response')
- && this.IsFn(this.updateConfig['process_response']) ? this.updateConfig['process_response'] : null;
- this.processInsertResponse = this.insertConfig.hasOwnProperty('process_response')
- && this.IsFn(this.insertConfig['process_response']) ? this.insertConfig['process_response'] : null;
- this.processDeleteResponse = this.deleteConfig.hasOwnProperty('process_response')
- && this.IsFn(this.deleteConfig['process_response']) ? this.deleteConfig['process_response'] : null;
-
- //Messages
- this.msgSubmitOK = f.msg_submit_ok!==undefined ? f.msg_submit_ok : 'Changes were successfully submitted to server!';
- this.msgConfirmDelSelectedRows = f.msg_confirm_delete_selected_rows!==undefined ? f.msg_confirm_delete_selected_rows : 'Do you want to delete the selected row(s)?';
- this.msgErrOccur = f.msg_error_occured!==undefined ? f.msg_error_occured : 'An error occured!';
- this.msgSaveUnsuccess = f.msg_submit_unsuccessful!==undefined ? f.msg_submit_unsuccessful : 'Changes could not be saved!';
- this.msgUndefinedSubmitUrl = f.undefined_submit_url!==undefined ? f.undefined_submit_url : 'Changes could not be saved! Endpoint URL is not defined';
- this.msgNewRowNoUploader = f.msg_new_row_no_uploader!==undefined ? f.msg_new_row_no_uploader : 'Please save the newly added rows before using the Uploader.';
- this.msgInvalidData = f.msg_invalid_data!==undefined ? f.msg_invalid_data : 'Returned data is invalid.';
-
- //Containers
- this.ifrmContainer = {}; //submit forms container
-
- //Values
- this.valuesSeparator = ', ';
- this.defaultRecordUndefinedValue = '...';
- this.newRowClass = 'ezNewRow';
- this.recordKeyValue = 'new';
-
- //Attributes
- this.attrValue = 'data-ez-slc-value';
- this.attrText = 'data-ez-slc-text';
- this.attrCont = 'data-ez-html';
- this.attrData = 'data-ez-data';
- this.attrUplname = 'data-ez-uplname';
- this.attrColIndex = 'data-ez-col-index';
- this.attrRowIndex = 'data-ez-row-index';
-
- //Counters
- this.savedRowsNb = { 'insert': 0, 'update': 0, 'delete': 0 };
-
- //prefixes
- this.prfxEdt = 'edt_';
- this.prfxIFrm = 'iframe_';
- this.prfxFrm = 'form_';
- this.prfxScr = 'scr_';
- this.prfxParam = 'col_';
- //upload editor
- this.prfxUplCont = 'upl_';
- this.prfxUplForm = 'upl_form_';
- this.prfxUplIframe = 'upl_ifrm_';
- this.prfxUplInfo = 'upl_info_';
- this.prfxUplOutput = 'upl_output_';
- this.prfxUplBtn = 'upl_btn_';
- this.prfxUplBtnClose = 'upl_btn_close_';
- this.prfxUplImgDisplay = 'upl_img_display_';
- this.prfxUplWinRef = 'et_upl_';
-
- //Upload form
- this.uplFileInp = 'UPL_FILE';
- this.uplKeyInput = 'RECORD_KEY';
- this.uplFldPath = 'IMAGES_FOLDER_PATH';
- this.uplSqlFieldName = 'SQL_FIELD';
- this.uplFileSize = 'MAX_FILE_SIZE';
- this.uplValidExts = 'VALID_EXTENSIONS';
- this.uplJsCode = 'JS_CODE';
-
- this.Editable = new Editable(this);
- this.Selection = new Selection(this);
-};
-
-var Editable = function(editTable){
- this.o = editTable;
-};
-
-var Selection = function(editTable){
- this.o = editTable;
-};
-
-var Uploader = function(editTable, colIndex){
- this.o = editTable;
- this.colIndex = colIndex;
- window[this.o.prfxUplWinRef + colIndex + this.o.id] = this; //global reference for server-side purposes
-};
-
-Uploader.prototype = {
- divUpl: null, formUpl: null, fileUpl: null, hiddenFileSize: null, hiddenFolderPath: null, hiddenValidExt: null, hiddenKey: null,
- ifrmUpl: null, divUplInfo: null, divUplOutput: null, divUplBtnsCont: null, divUplBtn: null, divUplBtnClose: null, divUplDisplay: null,
- initialValue: null, isUploadSuccessful: false,
- Init: function(){
- if(!this.o.hasUploader){ return; }
- this.SetUploader();
- },
- SetUploader: function(){
- this.divUpl = this.o.CreateElm('div',
- ['id', this.o.prfxUplCont + this.colIndex + this.o.id], ['style', 'display:none; z-index:10001;'], ['class', this.o.uplCss[this.colIndex]]
- );
- this.formUpl = this.o.CreateElm('form',
- ['id', this.o.prfxUplForm + this.colIndex + this.o.id], ['name', this.o.prfxUplForm + this.colIndex + this.o.id], ['method', 'POST'],
- ['action', this.o.uplURI[this.colIndex]], ['target', this.o.prfxUplIframe + this.colIndex + this.o.id], ['enctype', 'multipart/form-data']
- );
- this.fileUpl = this.o.CreateElm('input',['id', this.o.uplFileInp], ['name', this.o.uplFileInp], ['type', 'file']);
- this.hiddenFileSize = this.o.CreateElm('input', ['name', this.o.uplFileSize], ['type', 'hidden'], ['value', this.o.uplMaxFileSize[this.colIndex]]); //server-side info: max file size
- this.hiddenFolderPath = this.o.CreateElm('input', ['name', this.o.uplFldPath], ['type', 'hidden'], ['value', this.o.uplPath[this.colIndex]]); //server-side info: images folder path
- this.hiddenValidExt = this.o.CreateElm('input', ['name', this.o.uplValidExts], ['type', 'hidden'], ['value', this.o.uplValidExt[this.colIndex]]); //server-side info: allowed file extensions
- this.hiddenKey = this.o.CreateElm('input', ['name', this.o.uplKeyInput], ['type', 'hidden'], ['value', this.o.recordKeyValue]); //server-side info: record key
- this.hiddenSqlField = this.o.CreateElm('input', ['name', this.o.uplSqlFieldName], ['type', 'hidden'], ['value', this.o.uplSqlField[this.colIndex]]); //server-side info: SQL field name storing upload filename
- this.hiddenUplWinRef = this.o.CreateElm('input', ['name', this.o.uplJsCode], ['type', 'hidden'], ['value', this.o.uplJsSuccess[this.colIndex]]); //server-side info: js code invoked from server when upload successful
- this.ifrmUpl = this.o.CreateElm('iframe', ['id', this.o.prfxUplIframe + this.colIndex + this.o.id], ['name', this.o.prfxUplIframe + this.colIndex + this.o.id], ['style', 'display:none; left:-10001;']);
- this.divUplInfo = this.o.CreateElm('div',['id', this.o.prfxUplInfo + this.colIndex + this.o.id]);
- this.divUplOutput = this.o.CreateElm('div',['id', this.o.prfxUplOutput + this.colIndex + this.o.id], ['class', this.o.uplOutputCss[this.colIndex]]);
- this.divUplBtnsCont = this.o.CreateElm('div',['style', 'text-align:right']);
- this.divUplBtn = this.o.CreateElm('button',['id', this.o.prfxUplBtn + this.colIndex + this.o.id], ['style', 'display:none;']);
- this.divUplBtnClose = this.o.CreateElm('button',['id', this.o.prfxUplBtnClose + this.colIndex + this.o.id]);
- this.divUplDisplay = this.o.CreateElm('div',['id', this.o.prfxUplImgDisplay + this.colIndex + this.o.id], ['class', this.o.uplDisplayCss[this.colIndex]]);
-
- //IE<8 class, name, style attributes are not set correctly...
- if(!this.o.Css.Has(this.divUpl, this.o.uplCss[this.colIndex])){
- this.o.Css.Add(this.divUpl, this.o.uplCss[this.colIndex]);
- this.o.Css.Add(this.divUplOutput, this.o.uplOutputCss[this.colIndex]);
- this.o.Css.Add(this.divUplDisplay, this.o.uplDisplayCss[this.colIndex]);
- this.divUpl.style.cssText = 'display:none; z-index:10001;';
- this.divUplBtnsCont.style.cssText = 'text-align:right';
- this.divUplBtn.style.cssText = 'display:none;';
- this.formUpl = document.createElement(
- ''
- );
- this.ifrmUpl = document.createElement(
- ''
- );
- }
-
- this.divUplInfo.innerHTML = parseInt(this.o.uplMaxFileSize[this.colIndex]/1024, 10) + 'Kb max (' + this.o.uplValidExt[this.colIndex].toString() + ')';
- this.divUplBtn.appendChild(this.o.CreateText('Upload'));
- this.divUplBtnClose.appendChild(this.o.CreateText('Close'));
- this.divUplBtnsCont.appendChild(this.divUplBtn);
- this.divUplBtnsCont.appendChild(this.divUplBtnClose);
-
- this.formUpl.appendChild(this.fileUpl);
- this.formUpl.appendChild(this.hiddenFileSize);
- this.formUpl.appendChild(this.hiddenFolderPath);
- this.formUpl.appendChild(this.hiddenUplWinRef);
- this.formUpl.appendChild(this.hiddenValidExt);
- this.formUpl.appendChild(this.hiddenKey);
- this.formUpl.appendChild(this.hiddenSqlField);
-
- this.divUpl.appendChild(this.formUpl);
- this.divUpl.appendChild(this.ifrmUpl);
- this.divUpl.appendChild(this.divUplInfo);
- this.divUpl.appendChild(this.divUplOutput);
- this.divUpl.appendChild(this.divUplBtnsCont);
- this.divUpl.appendChild(this.divUplDisplay);
- this.o.table.parentNode.insertBefore(this.divUpl, this.o.table);
-
- //Events
- var x = this;
- this.ifrmUpl.onload = this.ifrmUpl.onreadystatechange = function(){ //Iframe onload event
- if(!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete'){
- try{
- var iframeDoc = this.contentDocument || this.contentWindow.document;
- if(iframeDoc.location.href != 'about:blank'){
- x.Output(iframeDoc.body.innerHTML);
- x.iframe.src = 'about:blank';
- x.HideUploadButton();
- }
- } catch(ex){}
- }
- };
-
- this.o.Event.Add(this.fileUpl, 'click', function(e){ x.OnUplClick(); });
- this.o.Event.Add(this.divUplBtn, 'click', function(e){ x.Upload(); });
- this.o.Event.Add(this.divUplBtnClose, 'click', function(e){ x.Close(x.o.Selection.GetActiveRow().cells[x.colIndex]); });
-
- //Js code passed to server
- var js = this.o.uplJsSuccess[this.colIndex].replace(/\{1\}/g, this.o.prfxUplWinRef + this.colIndex + this.o.id);
- this.hiddenUplWinRef.value = js;
- },
- GetValue: function(){ return this.fileUpl.value; },
- HasValueChanged: function(){ return this.initialValue != this.GetValue(); },
- OnUplClick: function(){ this.ShowUploadButton(); },
- Upload: function(){ this.ShowLoader(); this.formUpl.submit(); },
- SetRecordKey: function(key){ this.hiddenKey.value = key; },
- GetRecordKey: function(){ return this.hiddenKey.value; },
- ShowUploadButton: function(){ this.divUplBtn.style.display = 'inline'; },
- HideUploadButton: function(){ this.divUplBtn.style.display = 'none'; },
- ShowUploadContainer: function(){ this.divUplDisplay.style.display = 'block'; },
- HideUploadContainer: function(){ this.divUplDisplay.style.display = 'none'; },
- ShowUpload: function(){
- if(!this.o.uplShowUpload[this.colIndex]){ return; }
- var row = this.o.Selection.GetActiveRow();
- if(this.o.showUpload[this.colIndex]){
- this.ShowUploadContainer();
- this.o.showUpload[this.colIndex].call(this, this.o, this.divUplDisplay, this.GetUploadName(), this.o.uplPath[this.colIndex]);
- return;
- }
- if(row){
- var uplname = this.GetUploadName();
- if(uplname){
- if(this.o.uplShowLink[this.colIndex]){
- this.divUplDisplay.innerHTML = this.GetUploadLinkHtml();
- } else {
- this.divUplDisplay.innerHTML = '