For this exercise, Create new Javascript class (MyDataTable) that extendsYAHOO.w

Question

For this exercise, Create new Javascript class (MyDataTable) that extendsYAHOO.widget.ScrollingDataTable class (see http://yui.github.io/yui2/docs/yui_2.9.0_full/docs/YAHOO.widget.DataTable.html) Create new class in a separate Javascript file MyDataTable.js Implement following functionality in the derived class: 1. Implement data formatter to display data ion each cell in an editable input box (see http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/datatable/dt_quickedit.html) The data inside of each cell should be displayed (formatted) in editable input box (not when you click on the cell) 2. a. After the datatable is created, and the data is loaded, add a div inside the table following all data rows, with text “Click here to add new row” The "Add new row" button/div (it does not have to be a button, just a div with the text inside it) should be displayed inside the table after all data rows are displayed, and directly bellow them. 2.b. Add event handler on click on this div to dynamically add new row of data to the datasource associate with it. The new row should be added to the table immediately on click on that "Add new row" button/div. The event handler should update the datasource and refresh/update the data table to reflect data with the new row.

Explanation / Answer

-----------------------------------------------------------------------------------------------

http://yui.github.io/yui2/docs/yui_2.9.0_full/datatable/

//////////////////////////////////////////////////////////////////////////////////////////////////////////

YAHOO.util.Event.addListener(window, "load", function() {

////////////////////////////////////////////////////////////////////////////////////

addRow

void addRow ( oData , index )

Adds one new Record of data into the RecordSet at the index if given, otherwise at the end. If the new Record is in page view, the corresponding DOM elements are also updated.

Parameters:

oData <Object> Object literal of data for the row.

index <Number> (optional) RecordSet position index at which to add data.

Returns: void

addRows

void addRows ( aData , index )

Convenience method to add multiple rows.

Parameters:

aData <Object[]> Array of object literal data for the rows.

index <Number> (optional) RecordSet position index at which to add data.

Returns: void

////////////////////////////////////////////////////////////////////////////////////////////////////////

please go troug this below link :

http://yui.github.io/yui2/docs/yui_2.9.0_full/datatable/index.html

http://yui.github.io/yui2/docs/yui_2.8.0/docs/DataTable.js.html

2     YAHOO.example.Basic = function() { 3         var myColumnDefs = [ 4             {key:"id", sortable:true, resizeable:true}, 5             {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true}, 6             {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true}, 7             {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true}, 8             {key:"title", sortable:true, resizeable:true} 9         ]; 10 11         var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders); 12         myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 13         myDataSource.responseSchema = { 14             fields: ["id","date","quantity","amount","title"] 15         }; 16 17         var myDataTable = new YAHOO.widget.DataTable("basic", 18                 myColumnDefs, myDataSource, {caption:"DataTable Caption"}); 19                   20         return { 21             oDS: myDataSource, 22             oDT: myDataTable 23         }; 24     }(); 25 });

Related Questions

Navigate

• Browse (All)
• Browse F
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.