• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 352
  • Last Modified:

Help with displaying data in a textbox

Hello,

I am using a Textbox from Componentone but I think this may also apply to a regular textbox.

I need users to enter diffrent data in multiple lines of a textbox, however the textbox doesn't show a line for each row, which makes it difficult to distinguish the different data.

How do I load my textbox with the following data in 5 rows.

1-
2-
3-
4-
5-

Also is possible to change the background colors of odd or even rows?

I am using xml as my datasource and a web form (aspx)

Victor
0
vcharles
Asked:
vcharles
  • 8
  • 4
  • 3
  • +1
1 Solution
 
Meir RivkinFull stack Software EngineerCommented:
can u post your aspx page?
why not using list instead of text box?
0
 
mkuzmanCommented:
Dumb comment maybe, but why not just 5 separate textboxes???
If you absolutely need it to look like one single textbox, just style it that way.

ie. Remove all the textbox borders, put them in a div (with borders).

<DIV style="border: 1px solid; width:100%">
<INPUT type="text" style="border:0; width:100%;" value="1." />
<INPUT type="text" style="border:0; width:100%;" value="2." />
<INPUT type="text" style="border:0; width:100%;" value="3." />
<INPUT type="text" style="border:0; width:100%;" value="4." />
<INPUT type="text" style="border:0; width:100%;" value="5." />
</DIV>

You could even wire-up the keydown event for each textbox, and handle cursor up/down behavior to move between textboxes approriately...

Just a thought.
0
 
vcharlesAuthor Commented:
I'm sorry but I can't post my aspx page. I can't use a listbox because I need users to enter data and the listbox does not allow you to enter data.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
vcharlesAuthor Commented:
Would the approach below show me,

1.
2.
3.
4.
5.

with each row separated by a line?

My only concern with this approach is it complicates matters when it comes to saving the data, I would need to find a way to save the data from 5 textboxes to one record and when I display the record find a way to view them again in 5 different textboxes, eventhough the data is in only one record.
0
 
mkuzmanCommented:
Why not just use a textarea then?

<TEXTAREA>
1-
2-
3-
4-
5-
</TEXTAREA>
0
 
Meir RivkinFull stack Software EngineerCommented:
check here:
http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

use this code to dynamically add your textboxes, that way u can change number of textboxes if necessary.

check the following exmpale:
<HTML>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>

<script id="jquery_loader"></script>

  <script type="text/javascript">
function Create() {
var counter = 5;
	for (i=1; i<=counter; i++)	{
		$(document.createElement('br')).appendTo("#inputs");
		$(document.createElement('input')).attr("id", 'textbox' + i).appendTo("#inputs");
	}

}
function GetValues() {	
	var span = "";
	$("input").each(function(i){
		span = span + "," + $(this).val();
		$("#output").text(span);
    });
}
</script>

</head>
<body>
<div id="inputs"/>
<div id="output"/>
<button type="button" onclick="Create()">Create Textboxes</button> 
<button type="button" onclick="GetValues()">Get Values</button> 

</body>
</HTML>

Open in new window

0
 
vcharlesAuthor Commented:
Hi,

Can you please send me the full syntax on how to include the TEXTAREA as part of the textbox, I will need the data in  a control in order to save it to my xml file.

Thanks,

Victor
0
 
vcharlesAuthor Commented:
Hi again,

Just saw the last post. If at all possible I would rather use one textbox wit the textarea proposed above, since it will be a lot easier to save the data to a record from one textbox rather than multiple textboxes.

Thanks,

Victor
0
 
mkuzmanCommented:
<TEXTAREA> is just another kind of HTML control, like a textbox (<INPUT type="text" />)

You cannot style it for alternate row background color though.

It's content is effectively delimited (by rows) with CR/LF.

Assuming that your record data is delimted the same (rows by CRLF) that shouldn't be a problem.
0
 
Meir RivkinFull stack Software EngineerCommented:
Create() function generates textboxes inside the "inputs" div and assign the id for each one in the format of: "textbox" + index.
to get the text from all of them, i used jquery which loops the textbox controls and concatenate their text and display it in div "output"
0
 
vcharlesAuthor Commented:
I will try both approaches and get tback to you.

Thank You very much for all your help.
0
 
Meir RivkinFull stack Software EngineerCommented:
@vcharles

i don't think it is easier simple jquery line of code.
textarea u can seperate each row and u can't have different backcolor for each row.
alternatively you can use editable html table which apply to your requirements:
http://www.java2s.com/Code/JavaScript/GUI-Components/Editabletablecell.htm

<HTML>
<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <META http-equiv="Author" content="Charles Dickens" />
  <TITLE> HTML Grid Demo Ver 0.1.1</title>
  <STYLE type="text/css">
    input { border-style: solid; border-width: 1px; font-family: verdana, arial, sans-serif; font-size: 9px; padding: 0px; color:black; backgroundcolor: #FFFFEE}
    td { border-style: solid; border-width: 1px; font-family: verdana, arial, sans-serif; font-size: 10px; padding: 0px;}
  
  </STYLE>
  <SCRIPT type="text/javascript">
/*\
|*| Version : 0.92
|*| Author  : Chaitanya Yinti
|*| Contact : yinti@users.sourceforge.net
|*| WebSite : http://dhtmlgrid.sourceforge.net/
|*|
|*| Feel free to use this script under the terms of the GNU General Public
|*| License, as long as you do not remove or alter this notice.
\*/

  /*************************************\
  |       Start of Config Param         |
  \*************************************/
  // Color used for hilighting a selected row
  var clrHilight = 'white';

  // Set this to false if you want 'click to select' and
  // 'doubleclick to Edit' mode
  var blnPointToSelect = true;

  // Full path of the blank image used to hide the sort images 
  var strBlankImage = "blank.gif";

  // Full path of the up image used on sort asc
  var strUpImage = "up.gif";  

  // Full path of the up image used on sort des
  var strDownImage = "down.gif";

  // The width of the images used to indicate the asc/des sort
  var intImgWidth = 12;

  // The height of the images used to indicate the asc/des sort
  var intImgHeight = 13;  
  /*************************************\
  |           End of Config Param       |
  \*************************************/

  /*************************************\
  |           Globals start             |
  \*************************************/

  // Stores the last used object during sort
  var objLastClick = -1;

  // Stores the text being edited
  var txtOld = "";

  // Stores the total table width
  var intTotalWidth = 0;

  // Stores the flag used by capturemouse
  var blnMouseOver = false;  

  // Stores the div being moved
  var objDivToMove = null;

  // Stores the number of coloumns; initialized in init ()
  var intColCount = 0;

  // Stores the row element currently selected
  var objRowSelected = null;

  //THE element which holds the table... 
  var element = null;
  /*************************************\
  |           Globals end               |
  \*************************************/

  /*********************TODO*****************************\
   prototype setCapture/releaseCapture PROPERLY
   Get rid of isIE, isNS4 completely ...
   Extend keycapture to navigate the table on up/down arrow
   Fix escape/unescape on text change
  \******************************************************/
    
  /*\
  |*| The entry point. This will 
  |*|    Attache all the appropriate functions to the table
  |*|    Call function to create the IMG elems used during the sorting
  |*|    call function to init the DIV elems that are used for moving
  |*|    call function to init the DIV elems used for about box
  \*/
  function init (tableName)
  {
    //Handle all javascript errors 
    window.onerror = handleError;

    isIE = (navigator.appVersion.indexOf ("MSIE") != -1);
    isNS4 = (document.layers) ? true : false;
    isNS6 = (!document.layers) && (navigator.userAgent.indexOf ('Netscape')!=-1);

    if ((isNS4) && (!isNS6)) alert ("Currently only supports NN 6 and above");

    if (document.getElementById)
      element = document.getElementById (tableName);
    else  //TODO: Need to test this piece of code still. Happens only in NN4 so far 
      eval (element = "document." + tableName);

    if (element == null)
      return alert ("Error: Not able to get table element ");

    if (element.tagName != 'TABLE')
      return alert ("Error: Not able to control element " + element.tagName);

    initNNFunctions ();

    if (blnPointToSelect)
    {
      element.attachEvent ('onmouseover', selectRow);
      element.attachEvent ('onclick', onClickCell);
    }
    else
    {
      element.attachEvent ('onclick', selectRow);
      element.attachEvent ('ondblclick', onClickCell);
    }

    document.attachEvent ('onkeydown' , captureDelKey);

    //Need this fix for IE only .. so element.focus is stubbed in NN
    element.focus ();
  
    initSortImages ();
    initDiv ();
    initAbout ();
  }

  /*\
  |*| This function removes the textnodes from the table rows.
  |*| This cleanup work is needed to get rid of the EXTRA textnodes that NN gives
  \*/

  function removeTextNodes (t)
  {
    for (var i = 0; t.childNodes[i] ; i++)
    {
      if (!t.childNodes[i].tagName)
      {
         t.childNodes[i].parentNode.removeChild (t.childNodes[i]);
      }
      else
      {
        for (var j = 0; t.childNodes[i].childNodes[j] ; j++)
        {
          if (!t.childNodes[i].childNodes[j].tagName) 
            t.childNodes[i].childNodes[j].parentNode.removeChild (t.childNodes[i].childNodes[j]);
        }
      }
    }

  }

  /*\
  |*| This function adds the blank images to the head row of the table
  \*/
  function initSortImages ()
  {
    if (!element.tHead) return;
    removeTextNodes (element.tHead);
    var theadrow = element.tHead.childNodes[0]; //Assume just one Head row

    if (isIE) theadrow.style.cursor = "hand";
    else theadrow.style.cursor = "pointer";

    removeTextNodes (theadrow.parentNode);
    intColCount = theadrow.childNodes.length;

    for (var i = 0; i < intColCount; i++) 
    {
      objImg = document.createElement ("IMG");

      objImg.setAttribute ("src", strBlankImage);
      objImg.setAttribute ("id", "srtImg" + i);
      objImg.setAttribute ("width", intImgWidth);
      objImg.setAttribute ("height", intImgHeight);
      objImg.setAttribute ("align", "right");
      objImg.setAttribute ("valign", "middle");
      objImg.setAttribute ("border", 0);

      clickCell = theadrow.childNodes[i];
      clickCell.selectIndex = i;
      clickCell.insertAdjacentElement ("afterBegin", objImg);
      clickCell.style.width = clickCell.width;
    }
  }

  /*\
  |*| This will only be called once during initIALIZATION
  |*| This will create the DIV elems at the end of each col and
  |*| attach all the functions needed to resize the coloumns
  \*/
  function initDiv ()
  {
    var objLast = element, objDiv;
    removeTextNodes (element.tBodies[0]);

    for (var i = 1; i <= intColCount; i++)
    {  
      objDiv = document.createElement ("DIV");
      objDiv.setAttribute ('id', "DragMark" + (i - 1));
      objDiv.setAttribute ('name',  i);    //Used to track the TDs that have to be moved
      objDiv.style.position = "absolute";
      objDiv.style.top = 0; 

      var objTD = element.tHead.childNodes[0].childNodes[i - 1];
      if (!objTD || objTD.tagName != "TD") return;

      var intColWidth = (getRealPos (objTD) - 0) + (objTD.width - 0);

      objDiv.style.left = intColWidth - 3 ;
      objDiv.style.width = 6 + parseInt(element.border);
      objDiv.style.height = (element.tBodies[0].childNodes.length + 1) * objTD.offsetHeight;
      // for debugging only
      //objDiv.style.backgroundColor = clrHilight;
      
      //To make it more beautiful in IE 6  
      if (navigator.appVersion.indexOf ("MSIE 6.0") != -1)
        objDiv.style.cursor = "col-resize";
      else
        objDiv.style.cursor = "crosshair";

      objDiv.attachEvent ('onmouseover', flagTrue);
      objDiv.attachEvent ('onmousedown', captureMouse);
      objDiv.attachEvent ('onmousemove', resizeColoumn);
      objDiv.attachEvent ('onmouseup', releaseMouse);
      objDiv.attachEvent ('onmouseout', flagFalse);

      objLast.insertAdjacentElement ("afterEnd", objDiv);
      objLast = objDiv;
    }
  }

  /*\
  |*| This function will be fired onmouseover of the DIVs
  |*| Set the flag to true indicating that the mouse is over the DIV
  \*/
  function flagTrue ()
  {
    blnMouseOver = true;
  }

  /*\
  |*| This function will be fired onmousedown on the DIVs
  |*| Capture all the mosue events if mousedown is fired inside the DIV
  \*/
  function captureMouse ()
  {
    if (blnMouseOver)
    {
      objDivToMove = window.event.srcElement;
      objDivToMove.setCapture ();
    }
  }

  /*\
  |*| This function will be fired onmousemove of the DIVs
  |*| This will be used as a ondrag function... thanks to IE 5
  \*/
  function resizeColoumn ()
  {
    //If mouse button is down, objDivToMove will be valid... we can move/resize
    if (!objDivToMove) return;

    var intTDNum = objDivToMove.name - 1;
    var thead = element.tHead;

    if (!thead) return;

    var objTD = thead.childNodes[0].childNodes[intTDNum];

    if (!objTD || objTD.tagName != "TD") return;

    var intCurWidth = objTD.offsetWidth;
    var newX = window.event.clientX;
    //var newX = window.event.x;
    var intNewWidth = newX - objTD.offsetLeft;

    //TODO: who decided that the minimum col widhth is 50px?
    if (intNewWidth < 50) return;
    //Check to see if the table widht is more than the width of the window
    //Need that 20px buffer in IE to prevent scroll bars from appearing
    if (element.document.body.offsetWidth - 20 < element.offsetWidth - intCurWidth + intNewWidth) return;

    objTD.style.width = intNewWidth;

    var objDiv = objDivToMove;
    //Will be ± 1 depending on which side the mouse moved
    //will be used to move all the DIVs remaining on the right
    var intDivMove = newX - objDiv.offsetLeft;
    objDiv.style.left = newX;

    //Move all the remaining DIVs on the right
    for (var i = 1; i < intColCount - intTDNum; i++)
    {        
      objDiv = objDiv.nextSibling;
      objDiv.style.left = objDiv.offsetLeft + intDivMove ;
    }
  }

  /*\
  |*| This function will be fired onmouseup
  |*| Release all the mouse events of the DIV
  \*/
  function releaseMouse ()
  {
    objDivToMove.releaseCapture ();
    objDivToMove = null;
  }

  /*\
  |*| This function will be fired onmouseout of the DIV
  |*| Set the flag indicating that the mouse is NOT over the DIV
  \*/
  function flagFalse ()
  {
    blnMouseOver = false;
  }

  /*\
  |*| This function will be called once during initIALIZATION
  |*| This will create DIV elm after the table to display the ABOUT informationA
  \*/
  function initAbout ()
  {
    objDiv = window.document.createElement ("DIV");
    objDiv.id = "About";
    objDiv.style.position = "absolute";
    objDiv.style.top = 0; 
    objDiv.style.left = 0 ;
    objDiv.align = "center";
    //element.document.body.offsetWidth ==> width of the IFRAME in IE
    objDiv.style.width = element.document.body.offsetWidth;
    objDiv.style.height = element.document.body.offsetHeight;
    objDiv.style.backgroundColor = "#0000FF";
    objDiv.style.color = "#FFFF00";
    objDiv.style.visibility = "hidden";
    objDiv.insertAdjacentText ("afterBegin", "DHTML Grid ver 0.92\n\n" + "");

    var objInput = document.createElement ("INPUT");
    objInput.id = "cmdAbout";
    objInput.title = "Ok";
    objInput.value = "Ok";
    objInput.align = "center";
    objInput.valign = "middle";
    objInput.style.height = "20px";
    objInput.style.width = "102px";
    objInput.type = "button";
    objInput.attachEvent ("onclick", about);

    objDiv.insertAdjacentElement ("beforeEnd", objInput);
    element.insertAdjacentElement ("afterEnd", objDiv);
  }

  /*\
  |*| Hilights the row on mouseover. This also sets the "previous row selected" to normal
  \*/
  function selectRow ()
  {
    var srcElem = getEventRow ();

    if (srcElem.tagName != "TR") return;
    if (objRowSelected)
    {
      objRowSelected.style.backgroundColor = '';
      objRowSelected = null;
    }
    if (srcElem.rowIndex > 0)
    {
     // srcElem.style.backgroundColor = clrHilight;
      objRowSelected = srcElem;
    }
    element.focus ();
  }

  /*\
  |*| Entry point for all the click events on the table
  \*/
  function onClickCell ()
  {
    var srcElem = getEventRow ();

    if (srcElem.tagName != "TR") return;
    if (srcElem.rowIndex == 0) sort ();
    else onEdit ();
  }

  /*\
  |*| Capture the key press event, on del key see if a row is selected and delete
  \*/
  function captureDelKey ()
  {
    var keyPressed = event.keyCode;
    
    var srcElem = window.event.srcElement;
    if ((keyPressed == 46) && (srcElem.tagName != "INPUT") && (objRowSelected))
    {
      deleteRow (objRowSelected.rowIndex - 1);
      objRowSelected = null;
    }
  }

  /*\
  |*| detach all the events attached to the element and call other cleanup functions
  \*/
  function cleanup ()
  {
    element.detachEvent ('onmouseover', selectRow);
    element.detachEvent ('onclick', onClickCell);
    cleanupDiv ();
    cleanupAbout ();
  }

  /*\
  |*| Used by cleanup to clean the DIVs created for moving the Cols
  |*| detach all the events and delete the elements here
  \*/
  function cleanupDiv ()
  {
    var objDiv;
    for (var i = 1; i <= intColCount; i++)
    {  
      objDiv = element.document.getElementById ("DragMark" + (i - 1));
      objDiv.detachEvent ('onmouseover', flagTrue);
      objDiv.detachEvent ('onmousedown', captureMouse);
      objDiv.detachEvent ('onmousemove', resizeColoumn);
      objDiv.detachEvent ('onmouseup', releaseMouse);
      objDiv.detachEvent ('onmouseout', flagFalse);
      objDiv.removeNode (true);
    }
  }

  /*\
  |*| Detach all the events and Delete the elms related to the about box here
  \*/
  function cleanupAbout ()
  {
    element.document.getElementById ("About").removeNode (true);
  }

  /*\
  |*| This is THE function which does all the real sorting of the rows
  |*| First get rid of all the text-node elements that NN returns for spaces in the tables
  |*| then sort the contents based on which coloumn is clicked
  \*/
  function insertionSort (t, iRowEnd, fReverse, iColumn)
  {
    var textRowInsert, textRowCurrent, eRowInsert, eRowWalk;
    removeTextNodes (t);
    for (var iRowInsert = 1 ; iRowInsert <= iRowEnd ; iRowInsert++)
    {
      if (iColumn)
      {
        if (typeof (t.childNodes[iRowInsert].childNodes[iColumn]) != "undefined")
           textRowInsert = t.childNodes[iRowInsert].childNodes[iColumn].innerText;
        else
          textRowInsert = "";
      }
      else
      {
        textRowInsert = t.childNodes[iRowInsert].innerText;
      }

      for (var iRowWalk = 0 ; iRowWalk < iRowInsert ; iRowWalk++)
      {
        if (iColumn)
        {
          if (typeof (t.childNodes[iRowWalk].childNodes[iColumn]) != "undefined")
            textRowCurrent = t.childNodes[iRowWalk].childNodes[iColumn].innerText;
          else
            textRowCurrent = "";
        }
        else
        {
          textRowCurrent = t.childNodes[iRowWalk].innerText;
        }
        if ((!fReverse && textRowInsert < textRowCurrent) || (fReverse && textRowInsert > textRowCurrent))
        {
          eRowInsert = t.childNodes[iRowInsert];
          eRowWalk = t.childNodes[iRowWalk];
          t.insertBefore (eRowInsert, eRowWalk);
          iRowWalk = iRowInsert; // done
        }
      }
    }
  }

  /*\
  |*|  This function is called when there is a click event on the top
  |*|  row
  \*/
  function sort ()
  {
    var srcElem = getEventCell ();
    if (srcElem.tagName != "TD") return;

    var thead = element.tHead;  
    // clear the sort images in the head
    var imgcol = thead.getElementsByTagName ("IMG");
    for (var x = 0; x < imgcol.length; x++) 
    {
      imgcol[x].setAttribute('src', strBlankImage);
    }

    if (objLastClick == srcElem.selectIndex)
    {
      if (reverse == false)
      {
        srcElem.childNodes[0].setAttribute ('src', strDownImage);
        reverse = true;
      }
      else 
      {
        srcElem.childNodes[0].setAttribute ('src', strUpImage);
        reverse = false;
      }
    }
    else
    {
      reverse = false;
      objLastClick = srcElem.selectIndex;
      srcElem.childNodes[0].setAttribute ('arc', strUpImage);

    }
    tbody = element.tBodies [0];
    insertionSort (tbody, tbody.rows.length-1, reverse, srcElem.selectIndex);
  }

  /*\
  |*| This function is called when focus is lost on the text box
  |*| that is used to read user input. Validate the contents of the
  |*| input box and write them back to the table cell
  \*/
  function focusLost ()
  {
    var objSrcElm = window.event.srcElement; 
    objSrcElm.parentNode.innerHTML = unescape (objSrcElm.value);
  }

  /*\
  |*| This function is called when user clicks on a cell other than
  |*| the top row.
  |*| Show the content of the cell in an input box
  \*/
  function onEdit ()
  {
    var srcElem = getEventCell ();
    
    if (srcElem.tagName != "TD") return;
    if (srcElem.firstChild && srcElem.firstChild.tagName == "INPUT") return;
    
    txtOld = srcElem.innerHTML;
    srcElem.innerHTML = ""; 

    var objInput = document.createElement ("INPUT");
    objInput.style.width = "100%";//srcElem.clientWidth;
    objInput.type = "text";
    objInput.value = "" + escape (txtOld);
    //objInput.attachEvent ("onfocusout", focusLost);
    //the above onfocusout works fine in IE 6 but not in IE 5 so...
    objInput.attachEvent ("onblur", focusLost);
    objInput.attachEvent ("onkeypress", checkForEnter);

    srcElem.insertAdjacentElement ("beforeEnd", objInput);

    objInput.select ();
  }

  /*\
  |*| This function is used to add a row at the end of the tabl
  |*| Once the rows are added it calls the function to change the height
  |*|  of the DIVs that are used for resizing the table.
  \*/
  function addRow ()
  {
    var objTR = document.createElement ("TR");
    var objTD = document.createElement ("TD");

    for (var i = 0; i < addRow.arguments.length; i++) 
    {
      objTD = document.createElement ("TD");
      objTD.appendChild (document.createTextNode ((arguments[i]=="")?"null":arguments[i]));
      objTR.insertAdjacentElement ("beforeEnd", objTD);
    }

    objTBody = element.tBodies [0];
    objTBody.insertAdjacentElement ("beforeEnd", objTR);

    resizeDivs ();
  }
  

  /*\
  |*| The function deletes the last row by calling the deleteRow function 
  |*|  with the table row count
  \*/
  function deleteLastRow ()
  {
    removeTextNodes (element.tBodies[0]);
    this.deleteRow (element.tBodies[0].childNodes.length - 1);
  }

  /*\
  |*| The function checks if the rownum passed is a valid row 
  |*|  and deletes it 
  |*| This also calls the resizeDivs function to reduce the height
  |*|  of the DIVs that are used in resizing the table
  \*/
  function deleteRow (rowNum)
  {
    var tbody = element.tBodies [0];
    if (!tbody || rowNum < 0) return;

    removeTextNodes (tbody);
    tbody.childNodes[rowNum].removeNode (true);
    resizeDivs ();
  }

  /*\
  |*| This will be called on everkeypress event of the input box
  |*| This raises the focuslost event if the user hits enter
  \*/
  function checkForEnter ()
  {
    if (event.keyCode == 13) focusLost ();
  }

  /*\
  |*| Toggle the About div section
  \*/
  function about ()
  {
    if (element.document.getElementById ("About").style.visibility == "hidden")
      element.document.getElementById ("About").style.visibility = "visible";
    else
      element.document.getElementById ("About").style.visibility = "hidden";
  }

  /*\
  |*| Need this as IE 5 doesnt give the offsetLeft property properly
  \*/
  function getRealPos (elm)
  {
    intPos = 0;
    elm = elm.previousSibling;
    while ((elm!= null) && (elm.tagName!="BODY"))
    {
       intPos += elm.width - 0;
      elm = elm.previousSibling;
    }
    return intPos;
  }

  /*\
  |*| Return the TR elem on which an event has fireed
  \*/
  function getEventRow ()
  {
    var srcElem = window.event.srcElement;
    //crawl up to find the row
    while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
    {
      srcElem = srcElem.parentNode;
    }
    return srcElem;
  }

  /*\
  |*| Return the TD elem on which an event has fireed
  \*/
  function getEventCell ()
  {
    var srcElem = window.event.srcElement;
    //crawl up the tree to find the table col
    while (srcElem.tagName != "TD" && srcElem.tagName != "TABLE")
    {
      srcElem = srcElem.parentNode;
    }
    return srcElem;
  }

  /*\
  |*| This funtion is used to change the height of the DIVs that are used to drag the cols
  |*| Used when a row is added or deleted.
  \*/
  function resizeDivs ()
  {
    for (var i = 0; i < intColCount; i++)
    {  
      var objDiv = element.document.getElementById ("DragMark" + (i));
      var objTD = element.tHead.childNodes[0].childNodes[i];

      if ((!objDiv) || (!objTD) || (objTD.tagName != "TD")) return;
      objDiv.style.height = (element.tBodies[0].childNodes.length + 1) * (objTD.offsetHeight - 1);
    }
  }

  /*\
  |*| Function to handle erros. Displayes a request to contact along with the error messagei, filename and line
  \*/
  function handleError (err, url, line)
  {
    alert ('Oops, something went wrong.\n' +
       'Please contact yinti AT users DOT sourceforge DOT net with the following text\n' + 
       'Error text: ' + err + '\n' + 
       'Location  : ' + url + '\n' +
       'Line no   : ' + line + '\n');
     return true; // let the browser handle the error */
  }

  /*\
  |*| Function to prototype all the functions needed by NN to emulate the functionality of IE
  \*/
  function initNNFunctions ()
  {
    if ((self.Node) && (self.Node.prototype))
    {
      Node.prototype.removeNode = NNRemoveNode;

      Element.prototype.insertAdjacentText = NNInsertAdjacentText;
      Element.prototype.insertAdjacentElement = NNInsertAdjacentElement;
      Element.prototype.insert__Adj = NNInsertAdj;
      Element.prototype.attachEvent = NNAttachEvent;
      Element.prototype.detachEvent = NNDetachEvent;
      Element.prototype.setCapture = NNSetCapture;
      Element.prototype.releaseCapture = NNReleaseCapture;
      Element.prototype.__defineGetter__('document', NNDocumentGetter);

      HTMLElement.prototype.focus = NNNullFunction;
      HTMLElement.prototype.attachEvent = NNAttachEvent;
      HTMLElement.prototype.detachEvent = NNDetachEvent;
      HTMLElement.prototype.__defineGetter__('innerText', NNInnerTextGetter);
      HTMLElement.prototype.__defineSetter__('innerText', NNInnerTextSetter);

      HTMLDocument.prototype.attachEvent = NNAttachEvent;
      HTMLDocument.prototype.detachEvent = NNDetachEvent;

      Event.prototype.__defineGetter__('keyCode', NNKeyCodeGetter);
    }
  }

  /*\
  |*|
  \*/
  function NNRemoveNode (a1)
  {
    var p = this.parentNode;
    if (p&&!a1)
    {
      var df = document.createDocumentFragment ();
      for (var a = 0; a < this.childNodes.length; a++)
      {
        df.appendChild (this.childNodes[a])
      }
      p.insertBefore (df , this)
    }
    return p?p.removeChild (this):this;
  }

  /*\
  |*|
  \*/
  function NNInsertAdjacentText (a1 , a2)
  {
    var t = document.createTextNode (a2||"")
    this.insert__Adj (a1 , t);
  }

  /*\
  |*|
  \*/
  function NNInsertAdjacentElement (a1 , a2)
  {
    this.insert__Adj (a1 , a2);
    return a2;
  }

  /*\
  |*|
  \*/
  function NNInsertAdj (a1 , a2)
  {
    var p = this.parentNode;
    var s = a1.toLowerCase ();
    if (s == "beforebegin"){p.insertBefore (a2 , this)}
    if (s == "afterend"){p.insertBefore (a2 , this.nextSibling)}
    if (s == "afterbegin"){this.insertBefore (a2 , this.childNodes[0])}
    if (s == "beforeend"){this.appendChild (a2)}
  }

  /*\
  |*| Fuction to simulate attachEvent
  \*/
  function NNAttachEvent (strEvent, funcHandle)
  {
    var shortTypeName = strEvent.replace (/on/, "");
    funcHandle._ieEmuEventHandler = function (e)
    {
      window.event = e;
      window.event.srcElement = e.target;
      return funcHandle ();
    };
    this.addEventListener (shortTypeName, funcHandle._ieEmuEventHandler, false);
  }

  /*\
  |*| Fuction to simulate detachEvent
  \*/
  function NNDetachEvent (strEvent, funcHandle)
  {
    var shortTypeName = strEvent.replace (/on/, "");
    if (typeof funcHandle._ieEmuEventHandler == "function")
      this.removeEventListener (shortTypeName, funcHandle._ieEmuEventHandler, false);
    else 
      this.removeEventListener (shortTypeName, funcHandle, true);
  }

  /*\
  |*| A HUGE HACK to getaway with the lack of setcapture in NN
  \*/
  function NNSetCapture ()
  {
    //TODO: FIX THIS FIRST BEFORE ANYTHING ELSE!! MAJOR HACK FOR NOW
    document.attachEvent ('onmousemove', resizeColoumn);
    document.attachEvent ('onmouseup', releaseMouse);
  }

  /*\
  |*| A HUGE HACK to getaway with the lack of releasecapture in NN
  \*/
  function NNReleaseCapture ()
  {
    //TODO: FIX THIS SECOND THEN GO TO EVERYTHING ELSE! 
    document.detachEvent ('onmousemove', resizeColoumn);
    document.detachEvent ('onmouseup', releaseMouse);
  }

  /*\
  |*| Empty function used to remove any functions not needed in NN
  \*/
  function NNNullFunction () { /*Nothing here*/ }

  /*\
  |*| return the innerhtml by replacing all the <TAGNAME> from the string
  \*/
  function NNInnerTextGetter ()
  {
    return this.innerHTML.replace (/<[^>]+>/g,"");
  }

  /*\
  |*| Add the text as a textnode to the element
  \*/
  function NNInnerTextSetter (txtStr)
  {
    var parsedText = document.createTextNode (txtStr);
    this.innerHTML = "";
    this.appendChild (parsedText);
  }

  /*\
  |*| Function to simulate event.keyCode
  \*/
  function NNKeyCodeGetter ()
  {
    return this.which;
  }

  /*\
  |*| Function to simulate element.document
  \*/
  function NNDocumentGetter ()
  {
    return this.ownerDocument;
  }

  
  </SCRIPT>
</HEAD>
<BODY leftmargin="0" topmargin="0" onload="init('tblGrid')">
  <TABLE bordercolor="#ababab" border="1px" cellpadding="0" cellspacing="0"
      id="tblGrid" name="tblGrid" style="position:relative">
      <!-- style="behavior:url(TableCtrl.htc);" -->
    <THEAD>
    <TR bgcolor="#999999">
      <TD width="170">Col 1</TD>
      <TD width="60">Col 2</TD>
      <TD width="170">Col 3</TD>
      <TD width="60">Col 4</TD>
    </TR>
    </THEAD>
    <TBODY>
    <TR bgcolor="#ff77aa">
      <TD>200</TD>
      <TD>dcdcdc</TD>
      <TD>400</TD>
      <TD>aaaaaa</TD>
    </TR>
     <TR bgcolor="#dd77cc">
      <TD>300</TD>
      <TD>c9e6ff</TD>
      <TD>600</TD>
      <TD>cccccc</TD>
    </TR>
    <TR bgcolor="#ff77aa">
      <TD>301</TD>
      <TD>e6e6ff</TD>
      <TD>601</TD>
      <TD>eeeeee</TD>
    </TR>
    </TBODY>
  </TABLE>
</BODY>
</HTML>

Open in new window

0
 
vcharlesAuthor Commented:
Hi,

I think to simplify matters, I will have users enter the data in a textbox and add it to a list box with the code below, but How do I modify the code to include sequential numbers in front of the data they enter. The issue with the approaches is when I need to redisplay the data in one textbox and allow users to modify the data.

For example:

1.AAAAAAAAAAAAAAA
2.BBBBBBBBBBBBBBBBBB
3.CCCCCCCCCCCCCCCCCC


and if the user removes line 2 the data would appear as:

1.AAAAAAAAAAAAAAAA
2.CCCCCCCCCCCCCCCCCC

Code to Add to Listbox:

 ListBox1.Items.Add(C1NSN.Text)
        ListBox1.DataBind()
        '  Dim checkInteger As Integer
        For i As Integer = 0 To ListBox1.Items.Count - 1
            'For i As Integer = 0 To 2
            Math.DivRem(i + 1, 2, checkInteger)
            If checkInteger = 0 Then
                ListBox1.Items(i).Attributes.Add("style", "background-color: Grey")
            Else
                ListBox1.Items(i).Attributes.Add("style", "background-color: Silver")
            End If
        Next

Code to Delete fromListbox:
 If ListBox1.SelectedIndex <> -1 Then
            ListBox1.Items.RemoveAt(ListBox1.SelectedIndex)
        End If
0
 
vcharlesAuthor Commented:
Hello,

To clarify my issue, after displaying the data to the listbox/listview, I will need to save it to my xml file in the following format: 1-AAAAAAAAA; 2-BBBBBBBBBB; 3-CCCCCCC etc...

When I  load that particular data back in the listbox/listview will I be able to see it again in the following format:

1-AAAAAAAA
2-BBBBBBBBB
3-CCCCCCCCC

Rather than:

1-AAAAAAAAA; 2-BBBBBBBBBB; 3-CCCCCCC

Victor
0
 
CodeCruiserCommented:
You would need to do some transformation between saving and loading steps to transform the data between two formats. A simple loop, some string manipulation etc.
0
 
vcharlesAuthor Commented:
Hello,

I decided to focus on using a Grid, will therefore close this case to avoid too many open threads. Thanks for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 8
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now