Loading ...
Sorry, an error occurred while loading the content.

Editing a record in the datatable problem (non-inline editing)

Expand Messages
  • George
    Hi all, I am having a some problems with the datatable widget. I have a markup based datatable on which I would like to use a datatable record modification
    Message 1 of 2 , May 8, 2007
    • 0 Attachment
      Hi all,

      I am having a some problems with the datatable widget. I have a
      markup based datatable on which I would like to use a datatable
      record modification feature. I know this can be achieved using the
      inline editor method and I had developed it using inline editing also.

      What I am looking here for a record editing feature is one item that
      is HTML Form based on the steps are as follows:

      1) User clicks on the record which they want to edit

      2) Then they press Edit link available in the page.

      3) The Edit link click will display a form in which all the data from
      the selected records filled in.

      4) User makes the necessary modification in the form fields and
      presses on update button available in the form.

      5) There should be something that writes the form data into the
      currently selected record and I don't know that part. I am looking
      for this part.

      You can refer my source code below where the functions that are
      related to editing of records are:

      (a) makeUpdationToDataTable()
      (b) editRecord()

      Please make sure that the Yahoo related file inclusion path are
      correct before viewing the page.

      The CSS page code starts now and the name I've used in bugreport.css
      ----------------------------------------------------------------------
      /* CSS Document */

      TABLE.t1 {
      width:750px; border: 1px solid black; border-collapse:
      collapse; table-layout:fixed;
      }

      TR.r1 {
      height:31px; font-size:11px; font-family:Verdana, Arial,
      Helvetica, sans-serif
      }

      TR.r2 {
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;text-align:center;height:auto;
      }

      TD.c1 {
      border: 1px solid black;
      }
      TD.c2 {
      border: 1px solid black; text-align: justify;
      }
      TD.c3 {
      border: 1px solid black;
      }
      TD.c4 {
      border: 1px solid black;
      }
      TD.c5 {
      border: 1px solid black;
      }
      TD.c6 {
      border: 1px solid black;
      }
      TD.c7 {
      border: 1px solid black;
      }
      TD.c8 {
      border: 1px solid black;
      }

      TH.h1 {
      width:61px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h2 {
      width:271px; overflow:hidden;border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h3 {
      width:55px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h4 {
      width:55px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h5 {
      width:51px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h6 {
      width:76px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h7 {
      width:84px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h8 {
      width:90px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }

      /*SS rules entered by JP*/
      TR.r1 a{
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;text-decoration:none;color:#000;font-weight:bold;
      }
      TR.r1 a:link{
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;text-decoration:none;color:#000;font-weight:bold;
      }
      TR.r1 a:hover{
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;color:#ff0000;text-decoration:none;
      }
      #new { width:400px;background-color:#BEDAFF;font-family:Verdana,
      Geneva, Arial, Helvetica, sans-serif;font-size:10px; border:1px solid
      #000;display:none;}

      .links
      {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-
      size:11px; color:#000; font-weight:bold;text-
      decoration:none;border:1px solid #000;padding:3px 5px 3px 5px;}

      .selection .yui-dt-selected {background-color:#97C0A5;} /*green*/

      #table_123 .yui-dt-editable.yui-dt-highlight {background-
      color:#BEDAFF;} /*light blue*/
      .yui-tt {visibility:hidden;position:absolute;color:#333;background-
      color:#FDFFB4;font-family:arial,helvetica,verdana,sans-
      serif;padding:2px;border:1px solid #FCC90D;font: 100% sans-serif;
      width:auto;}
      ----------------------------------------------------------------------

      bugreport.htm source code

      ----------------------------------------------------------------------
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
      4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html;
      charset=iso-8859-1" />
      <title>Untitled Document</title>
      <link rel="stylesheet" href="bugsreport.css" />

      <script type="text/javascript"
      src="../../build/yahoo/yahoo.js"></script>
      <script type="text/javascript"
      src="../../build/dom/dom.js"></script>
      <script type="text/javascript"
      src="../../build/event/event.js"></script>
      <script type="text/javascript"
      src="../../build/datasource/datasource-beta-debug.js"></script>
      <script type="text/javascript"
      src="../../build/datatable/datatable-beta-debug.js"></script>
      <script type="text/javascript"
      src="../../build/container/container.js"></script>
      <script type="text/javascript">
      //Function that converts an HTML table into data table
      var globalDataTable;
      function createDataTable(id){
      var columnHeaders = [
      {key:"id",text:"ID",sortable:true},

      {key:"summary",text:"Summary",sortable:true},

      {key:"opened",text:"Opened",sortable:true},

      {key:"closed",text:"Closed",sortable:true},

      {key:"STATUS",text:"Status",sortable:true},

      {key:"priority",text:"Priority",sortable:true},
      {key:"assignto",text:"Assigned
      To",sortable:true},
      {key:"submittedby",text:"Submitted
      By",sortable:true,editor:"textbox"}
      ];


      var columnSet = new YAHOO.widget.ColumnSet
      (columnHeaders);

      var markup = YAHOO.util.Dom.get(id);

      var dataTable = new YAHOO.widget.DataTable
      (markup,columnSet,null,{rowSingleSelect:true});

      dataTable.subscribe
      ("cellClickEvent",dataTable.onEventSelectRow);

      applyDataTableHeaderStyle(dataTable);

      applyDataTableBodyStyle(dataTable);

      globalDataTable = dataTable;

      return;
      }

      function applyDataTableHeaderStyle(dt) {
      dt.getTable().className = "t1";
      dt.getHead().childNodes[0].className = "r1";

      var headerCells = dt.getHead().childNodes[0];
      var cellCount = headerCells.childNodes.length;
      for(var i=0; i <cellCount;i++) {
      headerCells.childNodes[i].className
      = "h"+(i+1);
      }
      return;
      }

      //Function that applies the CSS styles on the tbody
      section
      function applyDataTableBodyStyle(dt) {
      var rowCounter = dt.getBody
      ().childNodes.length;
      for(var i=0; i < rowCounter;i++) {
      var row = dt.getBody().childNodes[i];
      row.className = "r2";
      var cellCounter =
      row.childNodes.length;
      for(var j=0; j < cellCounter; j++) {
      var td = row.childNodes[j];
      td.className = "c" + (j+1);
      }
      }
      return;
      }

      function getFormData(id) {
      return document.getElementById(id).value;
      }

      //Function that adds a new record into the data table
      function addRecord() {
      var idArray = getFormIds();
      var valueArray = new Array(idArray.length);
      var statVar = 0;

      //Extracting form data based on the IDs
      stored in the idarray
      for(var i = 0; i < idArray.length; i++) {
      valueArray[i] =
      document.getElementById(idArray[i]).value;
      if(valueArray[i] == null || valueArray
      [i] == "" || valueArray[i] == undefined) {
      statVar++;
      }
      }
      document.getElementById
      ('new').style.display='none';

      if(statVar == idArray.length) {
      return;
      }

      var oRec = {id:valueArray
      [0],summary:valueArray[1],opened:valueArray[2],closed:valueArray
      [3],STATUS:valueArray[4],priority:valueArray[5],assignedto:valueArray
      [6],submittedby:valueArray[7]};

      var oRecord = globalDataTable.getRecordSet
      ().addRecords([oRec]);
      globalDataTable.appendRows(oRecord);


      applyDataTableHeaderStyle(globalDataTable);
      applyDataTableBodyStyle(globalDataTable);

      return;
      }

      //Function that deletes a selected record n he data
      table
      function delRecord() {
      var row = globalDataTable.getSelectedRows()
      [0];

      var choice = confirm("Do you really want to
      delete the record?");
      if(choice) {
      globalDataTable.deleteRow(row);
      }

      return;
      }

      function getFormIds() {
      var idArray = new Array(document.forms
      [0].elements.length -1);

      for(var i = 0; i < idArray.length; i++) {
      idArray[i] = document.forms
      [0].elements[i].id;
      }
      return idArray;
      }

      //Editing related function.
      function editRecord() {
      var results = new Array
      (globalDataTable.getSelectedRows()[0].childNodes.length);

      for(var i = 0; i < results.length; i++) {
      results[i] =
      globalDataTable.getSelectedRows()[0].childNodes[i].childNodes
      [0].nodeValue;
      }
      var idArray = getFormIds();

      document.getElementById('new').style.display
      = "block";

      for(i = 0; i < results.length; i++) {
      document.getElementById(idArray
      [i]).value = results[i];
      }

      document.getElementById('button1').value
      = "Update";
      document.getElementById('button1').onclick =
      makeUpdationToDataTable;
      }

      function makeUpdationToDataTable() {
      var idArray = getFormIds();
      for(var i = 0; i < idArray.length; i++) {
      globalDataTable.getSelectedRows()
      [0].childNodes[i].childNodes[0].nodeValue = document.getElementById
      (idArray[i]).value;
      }
      document.getElementById('new').style.display
      = "none";

      /*var identifier;
      var recordSet = globalDataTable.getRecordSet
      ();
      identifier =
      globalDataTable.getSelectedRecordIds()[0];
      var rec = recordSet.getRecord(identifier);*/


      return;
      }

      //Function that creates a tooltip on the Delete button
      function enableTooltip() {
      tt2 = new YAHOO.widget.Tooltip("tt2", {
      context:"delete" });
      return;
      }

      window.onload = function() {
      createDataTable("table_123");
      }
      </script>

      </head>

      <body>
      <!-- Start Template for Bugs Tracker -->
      <div id="table_123">
      <table class="t1">
      <thead>
      <tr class="r1">
      <th class="h1">ID</th>
      <th class="h2">Summary</th>
      <th class="h3">Opened</th>
      <th class="h4">Closed</th>
      <th class="h5">Status</th>
      <th class="h6">Priority</th>
      <th class="h7">Assigned To</th>
      <th class="h8">Submitted By</th>
      </tr>
      </thead>
      <tbody>
      <tr class="r2">
      <td class="c1">000003</td>
      <td class="c2">Wiki tag "<" nowiki ">" to
      avoid parsing of wiki.class seems is not working.</td>
      <td class="c3">02/11/06</td>
      <td class="c4">02/02/07</td>
      <td class="c5">Fixed</td>
      <td class="c6">Normal</td>
      <td class="c7">Jones</td>
      <td class="c8">Merin</td>
      </tr>

      <tr class="r2">
      <td class="c1">000007</td>
      <td class="c2">The word ...collapse... do not
      disappers when the text area is less then limit of collapse area</td>
      <td class="c3">05/11/06</td>
      <td class="c4">09/11/06</td>
      <td class="c5">Fixed</td>
      <td class="c6">Low</td>
      <td class="c7">Merin</td>
      <td class="c8">Merin</td>
      </tr>

      </tbody>
      </table>
      </div>

      <p>
      <a href="#" onclick="document.getElementById
      ('new').style.display='block';" class="links">Add</a> 
      <a href="#" onclick="javascript: delRecord();"
      class="links" id="delete" title="Select the record you want to
      delete">Delete</a> 
      <a href="#" onclick="javascript: editRecord();"
      class="links" id="delete" title="Select the record you want to
      edit">Edit</a> 
      <div id="new">
      <form>
      <table cellspacing="0" cellpadding="0"
      width="350">
      <tr><td width="125">ID</td><td><input
      type="text" name="id" id="id" /></td></tr>
      <tr><td
      width="125">Summary</td><td><textarea rows="2" col="25"
      id="summary"></textarea></td></tr>
      <tr><td
      width="125">Opened</td><td><input type="text" name="open"
      id="open" /></td></tr>
      <tr><td
      width="125">Closed</td><td><input type="text" name="close"
      id="close" /></td></tr>
      <tr><td
      width="125">Status</td><td><input type="text" name="status"
      id="status" /></td></tr>
      <tr><td
      width="125">Priorityd</td><td><input type="text" name="priority"
      id="priority" /></td></tr>
      <tr><td width="125">Assigned
      To</td><td><input type="text" name="assign" id="assign" /></td></tr>
      <tr><td width="125">Submitted
      By</td><td><input type="text" name="submit" id="submit"/></td></tr>
      <tr><td colspan="2"><input
      type="button" name="button1" id="button1" onclick="addRecord();"
      value="Add"></td></tr></tr>
      </table>
      </form>
      </div>
      </p>

      </body>
      </html>
      ----------------------------------------------------------------------
      I would be really greatful for your help to solve this issue. And
      please feel free to point out the problem(s) or potential problem(s)
      in my code.

      Thanks in advance

      Regards

      George
    • Ted Husted
      As to (5), we ve been raising an event that with the new and old record as part of the event payload. A listener can then subscribe to the event and handle
      Message 2 of 2 , May 8, 2007
      • 0 Attachment
        As to (5), we've been raising an event that with the new and old record as
        part of the event payload. A listener can then subscribe to the event and
        handle updating the remote service. A demonstration of the code we are using
        (withtou the listener) is here:

        * http://www.geocities.com/planetyazaar/examples/dataform/tutorial.html

        HTH, Ted.



        George-104 wrote:
        >
        > Hi all,
        >
        > I am having a some problems with the datatable widget. I have a
        > markup based datatable on which I would like to use a datatable
        > record modification feature. I know this can be achieved using the
        > inline editor method and I had developed it using inline editing also.
        >
        > What I am looking here for a record editing feature is one item that
        > is HTML Form based on the steps are as follows:
        >
        > 1) User clicks on the record which they want to edit
        >
        > 2) Then they press Edit link available in the page.
        >
        > 3) The Edit link click will display a form in which all the data from
        > the selected records filled in.
        >
        > 4) User makes the necessary modification in the form fields and
        > presses on update button available in the form.
        >
        > 5) There should be something that writes the form data into the
        > currently selected record and I don't know that part. I am looking
        > for this part.
        >
        > You can refer my source code below where the functions that are
        > related to editing of records are:
        >
        > (a) makeUpdationToDataTable()
        > (b) editRecord()
        >
        > Please make sure that the Yahoo related file inclusion path are
        > correct before viewing the page.
        >
        > The CSS page code starts now and the name I've used in bugreport.css
        > ----------------------------------------------------------------------
        > /* CSS Document */
        >
        > TABLE.t1 {
        > width:750px; border: 1px solid black; border-collapse:
        > collapse; table-layout:fixed;
        > }
        >
        > TR.r1 {
        > height:31px; font-size:11px; font-family:Verdana, Arial,
        > Helvetica, sans-serif
        > }
        >
        > TR.r2 {
        > font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
        > serif;text-align:center;height:auto;
        > }
        >
        > TD.c1 {
        > border: 1px solid black;
        > }
        > TD.c2 {
        > border: 1px solid black; text-align: justify;
        > }
        > TD.c3 {
        > border: 1px solid black;
        > }
        > TD.c4 {
        > border: 1px solid black;
        > }
        > TD.c5 {
        > border: 1px solid black;
        > }
        > TD.c6 {
        > border: 1px solid black;
        > }
        > TD.c7 {
        > border: 1px solid black;
        > }
        > TD.c8 {
        > border: 1px solid black;
        > }
        >
        > TH.h1 {
        > width:61px; overflow:hidden; border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        > TH.h2 {
        > width:271px; overflow:hidden;border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        > TH.h3 {
        > width:55px; overflow:hidden; border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        > TH.h4 {
        > width:55px; overflow:hidden; border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        > TH.h5 {
        > width:51px; overflow:hidden; border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        > TH.h6 {
        > width:76px; overflow:hidden; border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        > TH.h7 {
        > width:84px; overflow:hidden; border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        > TH.h8 {
        > width:90px; overflow:hidden; border: 1px solid black;
        > background: rgb(135, 206, 250);
        > }
        >
        > /*SS rules entered by JP*/
        > TR.r1 a{
        > font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
        > serif;text-decoration:none;color:#000;font-weight:bold;
        > }
        > TR.r1 a:link{
        > font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
        > serif;text-decoration:none;color:#000;font-weight:bold;
        > }
        > TR.r1 a:hover{
        > font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
        > serif;color:#ff0000;text-decoration:none;
        > }
        > #new { width:400px;background-color:#BEDAFF;font-family:Verdana,
        > Geneva, Arial, Helvetica, sans-serif;font-size:10px; border:1px solid
        > #000;display:none;}
        >
        > .links
        > {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-
        > size:11px; color:#000; font-weight:bold;text-
        > decoration:none;border:1px solid #000;padding:3px 5px 3px 5px;}
        >
        > .selection .yui-dt-selected {background-color:#97C0A5;} /*green*/
        >
        > #table_123 .yui-dt-editable.yui-dt-highlight {background-
        > color:#BEDAFF;} /*light blue*/
        > .yui-tt {visibility:hidden;position:absolute;color:#333;background-
        > color:#FDFFB4;font-family:arial,helvetica,verdana,sans-
        > serif;padding:2px;border:1px solid #FCC90D;font: 100% sans-serif;
        > width:auto;}
        > ----------------------------------------------------------------------
        >
        > bugreport.htm source code
        >
        > ----------------------------------------------------------------------
        > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
        > 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        > <html>
        > <head>
        > <meta http-equiv="Content-Type" content="text/html;
        > charset=iso-8859-1" />
        > <title>Untitled Document</title>
        > <link rel="stylesheet" href="bugsreport.css" />
        >
        > <script type="text/javascript"
        > src="../../build/yahoo/yahoo.js"></script>
        > <script type="text/javascript"
        > src="../../build/dom/dom.js"></script>
        > <script type="text/javascript"
        > src="../../build/event/event.js"></script>
        > <script type="text/javascript"
        > src="../../build/datasource/datasource-beta-debug.js"></script>
        > <script type="text/javascript"
        > src="../../build/datatable/datatable-beta-debug.js"></script>
        > <script type="text/javascript"
        > src="../../build/container/container.js"></script>
        > <script type="text/javascript">
        > //Function that converts an HTML table into data table
        > var globalDataTable;
        > function createDataTable(id){
        > var columnHeaders = [
        > {key:"id",text:"ID",sortable:true},
        >
        > {key:"summary",text:"Summary",sortable:true},
        >
        > {key:"opened",text:"Opened",sortable:true},
        >
        > {key:"closed",text:"Closed",sortable:true},
        >
        > {key:"STATUS",text:"Status",sortable:true},
        >
        > {key:"priority",text:"Priority",sortable:true},
        > {key:"assignto",text:"Assigned
        > To",sortable:true},
        > {key:"submittedby",text:"Submitted
        > By",sortable:true,editor:"textbox"}
        > ];
        >
        >
        > var columnSet = new YAHOO.widget.ColumnSet
        > (columnHeaders);
        >
        > var markup = YAHOO.util.Dom.get(id);
        >
        > var dataTable = new YAHOO.widget.DataTable
        > (markup,columnSet,null,{rowSingleSelect:true});
        >
        > dataTable.subscribe
        > ("cellClickEvent",dataTable.onEventSelectRow);
        >
        > applyDataTableHeaderStyle(dataTable);
        >
        > applyDataTableBodyStyle(dataTable);
        >
        > globalDataTable = dataTable;
        >
        > return;
        > }
        >
        > function applyDataTableHeaderStyle(dt) {
        > dt.getTable().className = "t1";
        > dt.getHead().childNodes[0].className = "r1";
        >
        > var headerCells = dt.getHead().childNodes[0];
        > var cellCount = headerCells.childNodes.length;
        > for(var i=0; i <cellCount;i++) {
        > headerCells.childNodes[i].className
        > = "h"+(i+1);
        > }
        > return;
        > }
        >
        > //Function that applies the CSS styles on the tbody
        > section
        > function applyDataTableBodyStyle(dt) {
        > var rowCounter = dt.getBody
        > ().childNodes.length;
        > for(var i=0; i < rowCounter;i++) {
        > var row = dt.getBody().childNodes[i];
        > row.className = "r2";
        > var cellCounter =
        > row.childNodes.length;
        > for(var j=0; j < cellCounter; j++) {
        > var td = row.childNodes[j];
        > td.className = "c" + (j+1);
        > }
        > }
        > return;
        > }
        >
        > function getFormData(id) {
        > return document.getElementById(id).value;
        > }
        >
        > //Function that adds a new record into the data table
        > function addRecord() {
        > var idArray = getFormIds();
        > var valueArray = new Array(idArray.length);
        > var statVar = 0;
        >
        > //Extracting form data based on the IDs
        > stored in the idarray
        > for(var i = 0; i < idArray.length; i++) {
        > valueArray[i] =
        > document.getElementById(idArray[i]).value;
        > if(valueArray[i] == null || valueArray
        > [i] == "" || valueArray[i] == undefined) {
        > statVar++;
        > }
        > }
        > document.getElementById
        > ('new').style.display='none';
        >
        > if(statVar == idArray.length) {
        > return;
        > }
        >
        > var oRec = {id:valueArray
        > [0],summary:valueArray[1],opened:valueArray[2],closed:valueArray
        > [3],STATUS:valueArray[4],priority:valueArray[5],assignedto:valueArray
        > [6],submittedby:valueArray[7]};
        >
        > var oRecord = globalDataTable.getRecordSet
        > ().addRecords([oRec]);
        > globalDataTable.appendRows(oRecord);
        >
        >
        > applyDataTableHeaderStyle(globalDataTable);
        > applyDataTableBodyStyle(globalDataTable);
        >
        > return;
        > }
        >
        > //Function that deletes a selected record n he data
        > table
        > function delRecord() {
        > var row = globalDataTable.getSelectedRows()
        > [0];
        >
        > var choice = confirm("Do you really want to
        > delete the record?");
        > if(choice) {
        > globalDataTable.deleteRow(row);
        > }
        >
        > return;
        > }
        >
        > function getFormIds() {
        > var idArray = new Array(document.forms
        > [0].elements.length -1);
        >
        > for(var i = 0; i < idArray.length; i++) {
        > idArray[i] = document.forms
        > [0].elements[i].id;
        > }
        > return idArray;
        > }
        >
        > //Editing related function.
        > function editRecord() {
        > var results = new Array
        > (globalDataTable.getSelectedRows()[0].childNodes.length);
        >
        > for(var i = 0; i < results.length; i++) {
        > results[i] =
        > globalDataTable.getSelectedRows()[0].childNodes[i].childNodes
        > [0].nodeValue;
        > }
        > var idArray = getFormIds();
        >
        > document.getElementById('new').style.display
        > = "block";
        >
        > for(i = 0; i < results.length; i++) {
        > document.getElementById(idArray
        > [i]).value = results[i];
        > }
        >
        > document.getElementById('button1').value
        > = "Update";
        > document.getElementById('button1').onclick =
        > makeUpdationToDataTable;
        > }
        >
        > function makeUpdationToDataTable() {
        > var idArray = getFormIds();
        > for(var i = 0; i < idArray.length; i++) {
        > globalDataTable.getSelectedRows()
        > [0].childNodes[i].childNodes[0].nodeValue = document.getElementById
        > (idArray[i]).value;
        > }
        > document.getElementById('new').style.display
        > = "none";
        >
        > /*var identifier;
        > var recordSet = globalDataTable.getRecordSet
        > ();
        > identifier =
        > globalDataTable.getSelectedRecordIds()[0];
        > var rec = recordSet.getRecord(identifier);*/
        >
        >
        > return;
        > }
        >
        > //Function that creates a tooltip on the Delete button
        > function enableTooltip() {
        > tt2 = new YAHOO.widget.Tooltip("tt2", {
        > context:"delete" });
        > return;
        > }
        >
        > window.onload = function() {
        > createDataTable("table_123");
        > }
        > </script>
        >
        > </head>
        >
        > <body>
        > <!-- Start Template for Bugs Tracker -->
        > <div id="table_123">
        > <table class="t1">
        > <thead>
        > <tr class="r1">
        > <th class="h1">ID</th>
        > <th class="h2">Summary</th>
        > <th class="h3">Opened</th>
        > <th class="h4">Closed</th>
        > <th class="h5">Status</th>
        > <th class="h6">Priority</th>
        > <th class="h7">Assigned To</th>
        > <th class="h8">Submitted By</th>
        > </tr>
        > </thead>
        > <tbody>
        > <tr class="r2">
        > <td class="c1">000003</td>
        > <td class="c2">Wiki tag "<" nowiki ">" to
        > avoid parsing of wiki.class seems is not working.</td>
        > <td class="c3">02/11/06</td>
        > <td class="c4">02/02/07</td>
        > <td class="c5">Fixed</td>
        > <td class="c6">Normal</td>
        > <td class="c7">Jones</td>
        > <td class="c8">Merin</td>
        > </tr>
        >
        > <tr class="r2">
        > <td class="c1">000007</td>
        > <td class="c2">The word ...collapse... do not
        > disappers when the text area is less then limit of collapse area</td>
        > <td class="c3">05/11/06</td>
        > <td class="c4">09/11/06</td>
        > <td class="c5">Fixed</td>
        > <td class="c6">Low</td>
        > <td class="c7">Merin</td>
        > <td class="c8">Merin</td>
        > </tr>
        >
        > </tbody>
        > </table>
        > </div>
        >
        > <p>
        > # Add  
        > # Delete  
        > # Edit  
        > <div id="new">
        > <form>
        > <table cellspacing="0" cellpadding="0"
        > width="350">
        > <tr><td width="125">ID</td><td><input
        > type="text" name="id" id="id" /></td></tr>
        > <tr><td
        > width="125">Summary</td><td><textarea rows="2" col="25"
        > id="summary"></textarea></td></tr>
        > <tr><td
        > width="125">Opened</td><td><input type="text" name="open"
        > id="open" /></td></tr>
        > <tr><td
        > width="125">Closed</td><td><input type="text" name="close"
        > id="close" /></td></tr>
        > <tr><td
        > width="125">Status</td><td><input type="text" name="status"
        > id="status" /></td></tr>
        > <tr><td
        > width="125">Priorityd</td><td><input type="text" name="priority"
        > id="priority" /></td></tr>
        > <tr><td width="125">Assigned
        > To</td><td><input type="text" name="assign" id="assign" /></td></tr>
        > <tr><td width="125">Submitted
        > By</td><td><input type="text" name="submit" id="submit"/></td></tr>
        > <tr><td colspan="2"><input
        > type="button" name="button1" id="button1" onclick="addRecord();"
        > value="Add"></td></tr></tr>
        > </table>
        > </form>
        > </div>
        > </p>
        >
        > </body>
        > </html>
        > ----------------------------------------------------------------------
        > I would be really greatful for your help to solve this issue. And
        > please feel free to point out the problem(s) or potential problem(s)
        > in my code.
        >
        > Thanks in advance
        >
        > Regards
        >
        > George
        >
        >
        >
        >
        >

        --
        View this message in context: http://www.nabble.com/Editing-a-record-in-the-datatable-problem-%28non-inline-editing%29-tf3708525.html#a10383624
        Sent from the ydn-javascript mailing list archive at Nabble.com.
      Your message has been successfully submitted and would be delivered to recipients shortly.