inputEx - Datatable Usage

Dialog Editor

DataTable Caption
Id	Date	Quantity	Amount	Title	Category
Loading...
po-0167	03/24/1980	1	4	A Book About Nothing	SF	modify	delete
po-0783	01/03/1983	0	12	The Meaning of Life	Novel	modify	delete
po-0297	12/12/1978	12	1	This Book Was Meant to Be Read Aloud	SF	modify	delete
po-1482	03/11/1985	6	4	Read Me Twice	Philosophy	modify	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' },
16	{type: 'integer', label: 'Quantity', name: 'quantity' },
17	{type: 'number', label: 'Amount', name: 'amount'},
18	{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
19	{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
20	];
21
22	new inputEx.widget.DataTable({
23	parentEl: 'container1',
24	fields: myFields,
25	datasource: myDataSource,
26	datatableOpts: {caption:"DataTable Caption"}
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' },
			{type: 'integer', label: 'Quantity', name: 'quantity' },
			{type: 'number', label: 'Amount', name: 'amount'},
			{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
			{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
		];
		
		new inputEx.widget.DataTable({
			parentEl: 'container1', 
			fields: myFields,
			datasource: myDataSource,
			datatableOpts: {caption:"DataTable Caption"}
		});

Show/Hide columns

Table options

Click on table options to show/hide fields
Id	Date	Quantity	Amount	Title	Category
Loading...
po-0167	03/24/1980	1	4	A Book About Nothing	SF	modify	delete
po-0783	01/03/1983		12.12345	The Meaning of Life	Novel	modify	delete
po-0297	12/12/1978	12	1.25	This Book Was Meant to Be Read Aloud	SF	modify	delete
po-1482	03/11/1985	6	3.5	Read Me Twice	Philosophy	modify	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' },
16	{type: 'integer', label: 'Quantity', name: 'quantity' },
17	{type: 'number', label: 'Amount', name: 'amount'},
18	{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
19	{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
20	];
21
22	new inputEx.widget.DataTable({
23	parentEl: 'container2',
24	fields: myFields,
25	datasource: myDataSource,
26	datatableOpts: {caption:"Click on table options to show/hide fields"},
27	showHideColumnsDlg: true,
28
29	columnDefs: [
30	{"key": "id", "label": "Id", resizeable: true, sortable: true },
31	{"key": "date", "label": "Date", resizeable: true, sortable: true, formatter: YAHOO.widget.DataTable.formatDate},
32	{"key": "quantity", "label": "Quantity", resizeable: true, sortable: true, hidden: true},
33	{"key": "amount", "label": "Amount", resizeable: true, sortable: true},
34	{"key": "title", "label": "Title", resizeable: true, sortable: true},
35	{"key": "category", "label": "Category", "hidden": true, resizeable: true, sortable: true}
36	]
37	});
	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' },
			{type: 'integer', label: 'Quantity', name: 'quantity' },
			{type: 'number', label: 'Amount', name: 'amount'},
			{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
			{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
		];
		
		new inputEx.widget.DataTable({
			parentEl: 'container2', 
			fields: myFields,
			datasource: myDataSource,
			datatableOpts: {caption:"Click on table options to show/hide fields"},
			showHideColumnsDlg: true,
			
			columnDefs: [
				{"key": "id", "label": "Id", resizeable: true, sortable: true },
				{"key": "date", "label": "Date", resizeable: true, sortable: true, formatter: YAHOO.widget.DataTable.formatDate},
				{"key": "quantity", "label": "Quantity", resizeable: true, sortable: true, hidden: true},
				{"key": "amount", "label": "Amount", resizeable: true, sortable: true},
				{"key": "title", "label": "Title", resizeable: true, sortable: true},
				{"key": "category", "label": "Category", "hidden": true, resizeable: true, sortable: true}
			]
		});

Listening to the Custom Events

DataTable Caption
Id	Date	Quantity	Amount	Title	Category
Loading...
po-0167	03/24/1980	1	4	A Book About Nothing	SF	modify	delete
po-0783	01/03/1983	0	12	The Meaning of Life	Novel	modify	delete
po-0297	12/12/1978	12	1	This Book Was Meant to Be Read Aloud	SF	modify	delete
po-1482	03/11/1985	6	4	Read Me Twice	Philosophy	modify	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' },
16	{type: 'integer', label: 'Quantity', name: 'quantity' },
17	{type: 'number', label: 'Amount', name: 'amount'},
18	{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
19	{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
20	];
21
22	var myDialog = new inputEx.widget.DataTable({
23	parentEl: 'container3',
24	fields: myFields,
25	datasource: myDataSource,
26	datatableOpts: {caption:"DataTable Caption"}
27	});
28
29	myDialog.itemRemovedEvt.subscribe(function(){
30	alert('item deleted !');
31	});
32
33	myDialog.itemModifiedEvt.subscribe(function(){
34	alert('item modified !');
35	});
36
37	myDialog.itemAddedEvt.subscribe(function(){
38	alert('item added !');
39	});
	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' },
			{type: 'integer', label: 'Quantity', name: 'quantity' },
			{type: 'number', label: 'Amount', name: 'amount'},
			{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
			{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
		];
		
		var myDialog = new inputEx.widget.DataTable({
			parentEl: 'container3', 
			fields: myFields,
			datasource: myDataSource,
			datatableOpts: {caption:"DataTable Caption"}
		});
		
		myDialog.itemRemovedEvt.subscribe(function(){
			alert('item deleted !');
		});
		
		myDialog.itemModifiedEvt.subscribe(function(){
			alert('item modified !');
		});
		
		myDialog.itemAddedEvt.subscribe(function(){
			alert('item added !');
		});

inputEx - DataTable Usage

Dialog Editor

Show/Hide columns

Listening to the Custom Events