DataTable add row with textbox

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

K Vo

Username: atkien
Joined: Mon Sep 20, 2010 1:32 pm
Posts: 5

Tags:

DataTable add row with textbox

Posted: Mon Oct 04, 2010 10:13 am

+0-

Hi All,

I am working on DataTable with an ability of adding a new row with textboxes in each field. Only adding row has textboxes, the old rows are editable or non-editable. Do you have any ideas to do that?

Thanks

Todd Smith

YUI Contributor

Username: stlsmiths
Joined: Thu Nov 05, 2009 10:03 am
Posts: 675
GitHub: stlsmiths
Gists: stlsmiths
IRC: t_smith

Tags:

Re: DataTable add row with textbox

Posted: Wed Oct 06, 2010 7:36 pm

+0-

Not sure if this post belongs here or in YUI 2 Forums, but I can provide a suggestion for YUI 2.x.

You can create a DataTable record that includes HTML definitions for INPUT text elements and where your last column includes an
HTML BUTTON object, call it id='btnInsertNEW'. After the DataTable is created, use the "addRow" method to add the insert row as
the first record (at the top of the table).

Code:

var myDT = new YAHOO.widget.DataTable( .... your creation options here ... )

// Define the INPUT insert row ...

var insert_row = {
    col1: "<input type='text' id='idTxt1' value='' />",
    col2: "<input type='text' id='idTxt2' value='' />",
    col3: "<input type='text' id='idTxt3' value='' />",
    ... etc and the last column would be
    colN: "<button id='btnInserNEW'>Insert Record</button>";
};
// Note : the record keynames above 'col1', 'col2' will have to match the field names for the Columns and DataSource.

myDT.addRow( insert_row, 0 );

You can then create a YUI Button object and a click handler to handle processing the ID's ('idTxt1', 'idTxt2', etc..) and inserting
the values of the INPUT elements into your recordSet at your server and/or in the current DataTable in Javascript. If you need
help with inserting the data in the RecordSet you can review the YUI info and/or ask for help.

Another thought, if you are using inline Cell editing you could simply insert a row with all data set to "" or null and still insert the
BUTTON as the last column. Then use the Cell editing to make changes to each column, and follow the BUTTON reasoning
I have above to process and insert the record.

Good Luck,
Todd

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum