inputEx - dtInPlaceEdit Usage

InPlaceEditing

Use the following code to create a basic inputEx DataTable

Id	Date	Quantity	Amount	Title	Category
Loading...
po-0167	03/24/1980	1	4	A Book About Nothing	SF	delete
po-0783	01/03/1983	0	12	The Meaning of Life	Novel	delete
po-0297	12/12/1978	12	1	This Book Was Meant to Be Read Aloud	SF	delete
po-1482	03/11/1985	6	4	Read Me Twice	Philosophy	delete


1	/**
2	* Datasource and inputEx fields used for both examples
3	*/
4	var myDataSource = new YAHOO.util.DataSource([
5	{id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF"},
6	{id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel"},
7	{id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF"},
8	{id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy"}
9	]);
10	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
11	myDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category"] };
12
13	var myFields = [
14	{type: 'hidden', label: 'Id', name: 'id' },
15	{type: 'date', label: 'Date', name: 'date', showMsg: true},
16	{type: 'integer', label: 'Quantity', name: 'quantity'},
17	{type: 'number', label: 'Amount', name: 'amount'},
18	{type: 'string', label: 'Title', name: 'title'},
19	{type: 'select', label: 'Category', name: 'category', choices: ['SF', 'Novel', 'Philosophy']}
20	];
21
22	new inputEx.widget.dtInPlaceEdit({
23	parentEl: 'container1',
24	fields: myFields,
25	datasource: myDataSource
26	});
27
	view plain \| print \| ?

/**
	 * Datasource and inputEx fields used for both examples
	 */
	var myDataSource = new YAHOO.util.DataSource([
	    {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF"},
	    {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel"},
	    {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF"},
	    {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy"}
	]);
	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	myDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category"] };

var myFields = [
		{type: 'hidden', label: 'Id', name: 'id' },
		{type: 'date', label: 'Date', name: 'date', showMsg: true},
		{type: 'integer', label: 'Quantity', name: 'quantity'},
		{type: 'number', label: 'Amount', name: 'amount'},
		{type: 'string', label: 'Title', name: 'title'},
		{type: 'select', label: 'Category', name: 'category', choices: ['SF', 'Novel', 'Philosophy']}
	];
		
	new inputEx.widget.dtInPlaceEdit({
		parentEl: 'container1', 
		fields: myFields,
		datasource: myDataSource
	});

InPlaceEditing Advanced

Use the following code to create a basic inputEx DataTable

Table options

Id	Date	Quantity	Amount	Title	Category
Loading...
po-0167	03/24/1980	1	4	A Book About Nothing	SF	delete
po-0783	01/03/1983		12.12345	The Meaning of Life	Novel	delete
po-0297	12/12/1978	12	1.25	This Book Was Meant to Be Read Aloud	SF	delete
po-1482	03/11/1985	6	3.5	Read Me Twice	Philosophy	delete


1	// Example 2 (test for color field)
2	var myDataSource = new YAHOO.util.DataSource([
3	{id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF", color: "#993300"},
4	{id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel", color: "#333300"},
5	{id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF", color: "#003300"},
6	{id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy", color: "#003366"}
7	]);
8	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
9	myDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category","color"] };
10
11	var myFields = [
12	{type: 'hidden', label: 'Id', name: 'id' },
13	{type: 'date', label: 'Date', name: 'date' },
14	{type: 'integer', label: 'Quantity', name: 'quantity', size:4 },
15	{type: 'number', label: 'Amount', name: 'amount', size:4, showMsg:true, required:true },
16	{type: 'string', label: 'Title', name: 'title', required:true },
17	{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy']},
18	{type: 'color', label: 'Couleur', name: 'color' }
19	];
20
21	var myDatatable = new inputEx.widget.dtInPlaceEdit({
22	parentEl: 'container2',
23	fields: myFields,
24	datasource: myDataSource,
25	showHideColumnsDlg: true,
26
27	columnDefs: [
28	{"key": "id", "label": "Id", resizeable: true, sortable: true, editor: null },
29	{"key": "date", "label": "Date", resizeable: true, sortable: true, formatter: YAHOO.widget.DataTable.formatDate},
30	{"key": "quantity", "label": "Quantity", resizeable: true, sortable: true, hidden: true},
31	{"key": "amount", "label": "Amount", resizeable: true, sortable: true},
32	{"key": "title", "label": "Title", resizeable: true, sortable: true},
33	{"key": "category", "label": "Category", "hidden": true, resizeable: true, sortable: true},
34	{"key": "color", "label": "Color", sortable: true, formatter: function(elCell, record) {
35	var color = record.getData().color;
36	elCell.innerHTML = String.fromCharCode(60)+"div style='background-color: "+color+";'"+String.fromCharCode(62)+" "+String.fromCharCode(60)+"/div"+String.fromCharCode(62);
37	}}
38	]
39
40	});
41
42	myDatatable.itemAddedEvt.subscribe(function(event,args){
43	var rec = args[0];
44	var data = rec.getData();
45
46	// We add an id
47	data.id = 'my-id-12345';
48
49	// We send back the record and the updated data
50	this.onAddSuccess(rec,data);
51
52	alert("Item added with id : "+rec.getData('id'));
53	});
54
55	myDatatable.itemRemovedEvt.subscribe(function(event,args){
56	var rec = args[0];
57
58	// We send back the record to really delete the item in the datatable
59	this.onRemoveSuccess(rec);
60
61	alert("Item deleted : "+rec.getData('id'));
62	});
63
64	myDatatable.itemModifiedEvt.subscribe(function(event,args){
65	var rec = args[0];
66
67	this.onModifySuccess(rec);
68	alert("Item updated : "+rec.getData('id'));
69	});
70
71	/* Subscribe to this event to handle the non-filled required fields */
72	myDatatable.requiredFieldsEvt.subscribe(function(event,args){
73	var reqFields = args[0],
74	rlength = reqFields.length;
75
76	var error = 'You need to complete the following field(s) : \n';
77	for(var i=0; i != rlength; i++){
78	error += ' - '+reqFields[i]+'\n';
79	}
80	alert(error);
81	});
82
83
	view plain \| print \| ?

// Example 2 (test for color field)
	var myDataSource = new YAHOO.util.DataSource([
        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF", color: "#993300"},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel", color: "#333300"},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF", color: "#003300"},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy", color: "#003366"}
  ]);
  myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  myDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category","color"] };

// We send back the record and the updated data
		this.onAddSuccess(rec,data);
		
		alert("Item added with id : "+rec.getData('id'));
	});
	
	myDatatable.itemRemovedEvt.subscribe(function(event,args){
		var rec = args[0];
		
		// We send back the record to really delete the item in the datatable
		this.onRemoveSuccess(rec);
		
		alert("Item deleted : "+rec.getData('id'));
	});
	
	myDatatable.itemModifiedEvt.subscribe(function(event,args){
		var rec = args[0];
		
		this.onModifySuccess(rec);
		alert("Item updated : "+rec.getData('id'));
	});
	
	/* Subscribe to this event to handle the non-filled required fields */
	myDatatable.requiredFieldsEvt.subscribe(function(event,args){
		var reqFields = args[0],
		rlength = reqFields.length;
		
		var error = 'You need to complete the following field(s) : \n';
		for(var i=0; i != rlength; i++){
			error += ' - '+reqFields[i]+'\n';
		}
		alert(error);
	});

Add with a dialog

Use the following code to add items through a dialog

Id	Date	Quantity	Amount	Title	Category	Couleur
Loading...
po-0167	03/24/1980	1	4	A Book About Nothing	SF	#993300	delete
po-0783	01/03/1983	0	12	The Meaning of Life	Novel	#333300	delete
po-0297	12/12/1978	12	1	This Book Was Meant to Be Read Aloud	SF	#003300	delete
po-1482	03/11/1985	6	4	Read Me Twice	Philosophy	#003366	delete


1	var myDialogDataSource = new YAHOO.util.DataSource([
2	{id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF", color: "#993300"},
3	{id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel", color: "#333300"},
4	{id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF", color: "#003300"},
5	{id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy", color: "#003366"}
6	]);
7	myDialogDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
8	myDialogDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category","color"] };
9
10	var myFields = [
11	{type: 'hidden', label: 'Id', name: 'id' },
12	{type: 'date', label: 'Date', name: 'date' },
13	{type: 'integer', label: 'Quantity', name: 'quantity', size:4 },
14	{type: 'number', label: 'Amount', name: 'amount', size:4, showMsg:true, required:true },
15	{type: 'string', label: 'Title', name: 'title', required:true },
16	{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy']},
17	{type: 'color', label: 'Couleur', name: 'color' }
18	];
19
20	var myDialogDatatable = new inputEx.widget.dtInPlaceEdit({
21	parentEl: 'container3',
22	fields: myFields,
23	datasource: myDialogDataSource,
24	insertWithDialog: true
25	});
26
27
28	myDialogDatatable.itemAddedEvt.subscribe(function(event,args){
29	var rec = args[0];
30	var data = rec.getData();
31
32	// We add an id
33	data.id = 'my-id-12345';
34
35	// We send back the record and the updated data
36	this.onAddSuccess(rec,data);
37
38	alert("Item added with id : "+rec.getData('id'));
39	});
40
41	myDialogDatatable.itemRemovedEvt.subscribe(function(event,args){
42	var rec = args[0];
43
44	// We send back the record to really delete the item in the datatable
45	this.onRemoveSuccess(rec);
46
47	alert("Item deleted : "+rec.getData('id'));
48	});
49
50	myDialogDatatable.itemModifiedEvt.subscribe(function(event,args){
51	var rec = args[0];
52
53	this.onModifySuccess(rec);
54	alert("Item updated : "+rec.getData('id'));
55	});
56
57	/* Subscribe to this event to handle the non-filled required fields */
58	myDialogDatatable.requiredFieldsEvt.subscribe(function(event,args){
59	var reqFields = args[0],
60	rlength = reqFields.length;
61
62	var error = 'You need to complete the following field(s) : \n';
63	for(var i=0; i != rlength; i++){
64	error += ' - '+reqFields[i]+'\n';
65	}
66	alert(error);
67	});
68
69
	view plain \| print \| ?