inputEx - DataTable Usage
Dialog Editor
/** * 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
/** * 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
/** * 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 !'); });