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

Re: [ydn-javascript] Editing a record in the datatable problem (non-inline editing)

Expand Messages
  • 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 1 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.