Solved

Help with displaying data in a textbox

Posted on 2012-04-03
17
303 Views
Last Modified: 2012-08-13
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
Comment
Question by:vcharles
  • 8
  • 4
  • 3
  • +1
17 Comments
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
can u post your aspx page?
why not using list instead of text box?
0
 

Expert Comment

by:mkuzman
Comment Utility
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
 

Author Comment

by:vcharles
Comment Utility
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
 

Author Comment

by:vcharles
Comment Utility
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
 

Expert Comment

by:mkuzman
Comment Utility
Why not just use a textarea then?

<TEXTAREA>
1-
2-
3-
4-
5-
</TEXTAREA>
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
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
 

Author Comment

by:vcharles
Comment Utility
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
 

Author Comment

by:vcharles
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Expert Comment

by:mkuzman
Comment Utility
<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
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
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
 

Author Comment

by:vcharles
Comment Utility
I will try both approaches and get tback to you.

Thank You very much for all your help.
0
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
@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
 

Author Comment

by:vcharles
Comment Utility
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
 
LVL 83

Accepted Solution

by:
CodeCruiser earned 500 total points
Comment Utility
0
 

Author Comment

by:vcharles
Comment Utility
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
 
LVL 83

Expert Comment

by:CodeCruiser
Comment Utility
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
 

Author Comment

by:vcharles
Comment Utility
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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Creating an analog clock UserControl seems fairly straight forward.  It is, after all, essentially just a circle with several lines in it!  Two common approaches for rendering an analog clock typically involve either manually calculating points with…
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now