Looknig for an editable treeview

I need a script to edit a treeview inside a browseer.  It need to be scripting language, VBscript or Javascript, do anyone know if such script exist somewhere?

I need to be able do drag and drop from the tree to move item up and down inside the browser.  The page is in ASP.
LVL 2
dabelleiAsked:
Who is Participating?
 
raj_selvamConnect With a Mentor Commented:
If ur using javascript then follow this code.


=======================
<html>
<head>
<script LANGUAGE="JScript"><!--

var eFilterTableSelected = null;            // currently selected category folder
function SetupPage()
{
      folder_click( window.tblAll );
}

// Cursor is over a catgegory folder
function folder_mouseover(eTable)
{
      var srcImg = eTable.rows[0].cells[0].children[0].src;
      srcImg = srcImg.substr( 0, srcImg.length-5 ) + "1.gif"
      eTable.rows[0].cells[0].children[0].src = srcImg;
}

function folder_mouseout(eTable)
{
      if( eTable != eFilterTableSelected )
      {
            var srcImg = eTable.rows[0].cells[0].children[0].src;
            srcImg = srcImg.substr( 0, srcImg.length-5 ) + "0.gif"
            eTable.rows[0].cells[0].children[0].src = srcImg;
      }
}

// Cursor click on category folder
function folder_click(eTable)
{
      event.cancelBubble = true;

      if( eFilterTableSelected == eTable )
            return;

      var eText = eTable.rows[0].cells[1];
      eText.style.backgroundColor="#000080";
      eText.style.color="#FFFFFF";
      eText.style.fontWeight="bold";

      var eOldSelected = eFilterTableSelected;
      eFilterTableSelected = eTable;

      if( eOldSelected != null )
      {
            eText = eOldSelected.rows[0].cells[1];
          eText.style.backgroundColor="";
            eText.style.color="";
            eText.style.fontWeight="";

            folder_mouseout(eOldSelected);
      }
}
function group_click(eTable)
{
      // Check current state, and invert
      var bExpand;
      if( eTable.rows[1].cells[1].children[0].style.display == "none" )
            bExpand = true;
      else
            bExpand = false;

      // change the image
      var srcImg = eTable.rows[0].cells[0].children[0].src;
      srcImg = srcImg.substr( 0, srcImg.length-5 );
      srcImg += bExpand ? "1.gif" : "0.gif";
      eTable.rows[0].cells[0].children[0].src = srcImg;

      // toggle folder visibility
      var numFolders =       eTable.rows.length;
      var strDisplay = bExpand ? "block" : "none";

      for( i = 1; i < numFolders; i++ )
            eTable.rows[i].cells[1].children[0].style.display = strDisplay;
}


// Called when the filter selection is changed
function filter_onchange(strFilter)
{
      var m_strFilter = strFilter;
      strFilterExpression = m_strFilter;
      update_main();
}
function update_main()
{
      alert(strFilterExpression);
//      window.parent.frames.banner.refresh_tab( getFilterURL() );
}

function getFilterURL()
{
      // return selected item from tree
}

--></script>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>Date Range</title>
</head>

<body topmargin="0" background="back.gif" ONLOAD="SetupPage();">

<table border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td>
      </td>
    <td>
            <table ID="tblAll" border="0" cellspacing="0" cellpadding="0" style="font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);">
                  <tr>
                        <a href="javascript:filter_onchange(&quot;all&quot;)">
                        <td>
                              <img src="..\Filter\all1.gif">
                        </td>
                        <td>&nbsp;All&nbsp;
                        </td>
                        </a>
                  </tr>

                  <tr>
                        <td></td>
                        <table border="0" cellspacing="0" cellpadding="0">
                        <table border="0" cellspacing="0" cellpadding="0" Title="Click to Display/Hide Categories" style="font-family: Verdana; font-size: smaller; cursor:hand;"  ONCLICK="group_click(this);"><tr><td><img src="..\Filter\expand0.gif"></td><td><img src="..\Filter\group.gif">&nbsp;x</td></tr><tr><td></td><td>

                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;type:1&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>1</td></a></tr>

                        </table></td>

                        </table>

                        <table border="0" cellspacing="0" cellpadding="0" Title="Click to Display/Hide Categories" style="font-family: Verdana; font-size: smaller; cursor:hand;"  ONCLICK="group_click(this);"><tr><td><img src="..\Filter\expand0.gif"></td><td><img src="..\Filter\country.gif">&nbsp;xx</td></tr><tr><td></td><td>

                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;2&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>2</td></a></tr>


                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;3&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>3</td></a></tr>

                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;4&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>4</td></a></tr>

                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;5&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>5</td></a></tr>


                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;6&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>6</td></a></tr>


                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;7&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>7</td></a></tr>


                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;8&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>8</td></a>


                        </tr></table></td></table>


                        <table border="0" cellspacing="0" cellpadding="0" Title="Click to Display/Hide Categories" style="font-family: Verdana; font-size: smaller; cursor:hand;"  ONCLICK="group_click(this);"><tr><td><img src="..\Filter\expand0.gif"></td><td><img src="..\Filter\alert.gif">&nbsp;xxx</td></tr><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller;
                        cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;9&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>9</td></a></tr>

                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;10&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>10</td></a></tr>


                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;11&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>11</td></a></tr>

                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;12&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>12</td></a></tr>


                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;13&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>13</td></a></tr>


                        </table></td><tr><td></td><td>


                        <table border="0" cellspacing="0" padding="2" Title="Show Mobiles from this Category Only" style="display: none; font-family: Verdana; font-size: smaller; cursor:hand;" ONMOUSEOVER="folder_mouseover(this);" ONMOUSEOUT="folder_mouseout(this);" ONCLICK="folder_click(this);"><tr><a href="javascript:filter_onchange(&quot;14&quot;)"><td><img src="..\Filter\folder0.gif">&nbsp;</td><td>14</td></a></tr>

                        </table></td></table>

</body>
</html>

================

u want to add tree values dynamicaly, mail to me..
raj_selvam@hotmail.com

i expecting good points

raj_selvam
0
 
gbanikCommented:
You could use the Simple VB Tree Control for that or create your own control with the Tree Control embedded in it. Have you object placed in the ASP Page (actually executed at the Client). Use <CodeBase> Tag to avoid the control being installed at the client machine (at the client browser would call it).

All in all.... make your control whatever u want in VB. And then port it to your ASP Page. If you need help on how to pass data to your control from ASP... ask me?

GB.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
dabelleiAuthor Commented:
I don't really want to use VB in any way, no activeX at all, pur ASP code, VBSCript is ok or JavaScript, I need to run this over netscape or IE on PC or MAC as well.

And over all I need the Drag and Drop functionnality
0
 
AzraSoundCommented:
anything using only script is going to be slow...

one of the best out there is here:
http://www.ivanpeters.com/

youll notice its not very fast, but that is all you can expect using purely script
0
 
dabelleiAuthor Commented:
Can you send it to me by email please so I can try it.


daniel_belleisle@hotmail.com

Thanks
0
 
raj_selvamCommented:
sure
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.

All Courses

From novice to tech pro — start learning today.