Demos

DEMO 2

This demo shows how to

• configure the cell editors and enable the command buttons for editing
• configure the server-side actions for insert, update and delete operations
• plug a custom date picker component and use the editor's delegates
• use custom cell data validators
• use server activity callbacks to display a loader
• implement a custom row tooltip by using the row selection callback events
• customise the script's messages

This demo and demo 1 use the same SQL table, but here records flagged as deleted are also displayed.

Please note that is a live demo and your tests will be recorded in a database!
Instructions: double-click on a cell to open the row editor.

			//ezEditTable configuration object
			var demo2Config = {
				editable: true,
				scroll_into_view: true,
				form_submit_interval: 900,
				auto_save: false,
				cell_editors:[
					{ type: 'none' },
					{ type: 'input', attributes:[['title', 'First name and last name']], allow_empty_value:true },
					{ type: 'input', attributes:[['title', 'email address']] },
					{ type: 'custom', target: 'dateEditor' },
					{ type: 'input', attributes:[['maxLength', 9], ['title', '9 digits max.']], css:'alignRight' },
					{ type: 'boolean' },
					{ type: 'command', 
						buttons:{ 
							enable: ['update', 'insert', 'delete', 'submit', 'cancel'], 
							'update': { title:'Edit row' },
							'insert': { title:'Add row'  },
							'delete': { title:'Delete row' },
							'submit': { text:'Save', title:'Save'  },
							'cancel': { text:'Close', title:'Close' }
						} 
					}
				],
				actions:{
					'update': { 
						uri: 'php/employeeUpdate.php', submit_method: 'form', form_method: 'POST', 
						param_names: ['id','name','email','startdate','salary','active']
					},
					'insert': { 
						uri: 'php/employeeInsert.php', submit_method: 'form', form_method: 'POST', 
						param_names: ['id','name','email','startdate','salary','active'],
						default_record: ['', 'Employee name...', 'employee@email.com', '2011-01-01','0', '']
					},
					'delete': { 
						uri: 'php/script.deleteEmployee.php', submit_method: 'script', bulk_delete: false,
						param_names: ['id']
					}
				},
				//Server activity callback events
				on_server_activity_start: function(o, row){ setTimeout(function(){ o.Get('divLoader').style.display = 'block';}, 5); },
				on_server_activity_stop: function(o, row){ setTimeout(function(){ o.Get('divLoader').style.display = 'none';}, 5); },
				//Data validation delegate, the script does not provide data validation tools
				validate_modified_value: function(o, colIndex, oldVal, newVal, cell, editor){
					if(colIndex==2 && oldVal != newVal){ 
						if(!et_ValidateEmail(newVal)){
							alert('Please insert a valid email!'); 
							return false;
						} else return true;
					}
					else if(colIndex == 4 && oldVal != newVal){
						if(isNaN(newVal)){
							alert('Please insert a number!');
							return false;
						} else return true;
					}
					else return true;
				},
				open_custom_editor: function(o, cell, editor){
					cell.appendChild(editor);
					editor.style.display = ''; 
				},
				close_custom_editor: function(o, cell, editor){ 
					editor.style.display = 'none';
					document.body.appendChild(editor);
					var d = o.Get('daySlc'), m = o.Get('monthSlc'), y = o.Get('yearSlc');
					d.value = '';
					m.value = '';
					y.value = '';
				},
				get_custom_editor_value: function(o, editor, colIndex){
					var strDate;
					var d = o.Get('daySlc'), m = o.Get('monthSlc'), y = o.Get('yearSlc');
					strDate = y.value+'-'+m.value+'-'+d.value;
					return strDate;
				},
				set_custom_editor_value: function(o, editor, colIndex, val){
					o.config.SetDateEditorValue(o, val, 'YMD');
				},
				//Custom toolip on row selection
				on_after_selected_row: function(o, row){ 
					if(!o.customTooltip || !demo2ActionsInfo || !row.getAttribute('id')) return;
					var recordId = row.getAttribute('id').replace('tr','');
					var actionInfo = demo2ActionsInfo[recordId]; //gets the associated actionInfo object
					var div = o.Get('divActionInfo_'+recordId);
					if(div){ div.style.display = 'block'; return; } //div already exists
					if(actionInfo && actionInfo.hasOwnProperty('createDate')){
						var locatorURL = 'http://www.infosniper.net/index.php?map_source=1&overview_map=1&lang=1&map_type=1&zoom_level=7&ip_address=';
						div = o.CreateElm('div', ['id','divActionInfo_'+recordId]);
						div.style.cssText = 'position:absolute; display:block; background:#FFFF99; border:1px solid #999; color:#000; padding:5px; margin:-70px 0 0 0px;';
						div.innerHTML = '
Created on: '+actionInfo.createDate+ ' by: '+actionInfo.originIp+'
' +
							'
Modified on: '+actionInfo.modDate+' by: '+(actionInfo.modIp!='' ? ''+actionInfo.modIp+'' : '')+'
' +
							'
Deleted on: '+actionInfo.delDate+' by: '+(actionInfo.delIp!='' ? ''+actionInfo.delIp+'' : '')+'
';
						row.cells[0].appendChild(div);
					}					
				},
				on_before_deselected_row: function(o, row){
					if(!demo2ActionsInfo || !row.getAttribute('id')) return;
					var recordId = row.getAttribute('id').replace('tr','');
					var div = o.Get('divActionInfo_'+recordId);
					if(div){ div.parentNode.removeChild(div); div = null; }
				},
				//Messages
				msg_submit_ok: 'Data processed successfully!',
				msg_confirm_delete_selected_rows: 'Are you sure you want to delete the selected record?',
				msg_error_occured: 'Error!' ,
				msg_submit_unsuccessful: 'Data could not be saved correctly!',
				
				//Custom date editor function, does not belong to ezEditTable script
				SetDateEditorValue: function(o, val, dateType){
					var date = tf_FormatDate(val, dateType);
					var d = o.Get('daySlc'), m = o.Get('monthSlc'), y = o.Get('yearSlc');
					var day = date.getDate(), month = date.getMonth()+1, year = date.getFullYear();
					d.value = day.toString().length==1 ? '0'+day.toString() : day;
					m.value = month.toString().length==1 ? '0'+month.toString() : month;
					y.value = year;
				}				
			};
		

---

Top of page