inputEx - dtInPlaceEdit Usage

InPlaceEditing

Use the following code to create a basic inputEx DataTable

/**
	 * 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

// 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