Re: JavaScript Statement Question, resolved sort of

  • From: "Richard Thomas" <rthomas@xxxxxxxxxxx>
  • To: <programmingblind@xxxxxxxxxxxxx>
  • Date: Mon, 22 Oct 2007 11:01:46 -0400


  Hi aAll:
  Well, never found out what the apparent index was for.
  However, I used the value picked from the hidden field and used it to scroll 
to and set focus on the desired node in the tree view and it's working.  Only 
thingy is the focus appears to be on the next node after the node I set focus 
on.  Likely the focus is set at the end of the selected node.  There may be a 
way to back it up to the beginning of the node but that's a minor problem 
compared to manually scrolling through many nodes  on every expand or collapse, 
Phew!  Done enough for now!
  So my first real JavaScript is working, yah!
  Rick Farmington Mich. USA
  ----- Original Message ----- 
  From: Richard Thomas 
  To: programmingblind@xxxxxxxxxxxxx 
  Sent: Sunday, October 21, 2007 12:25 PM
  Subject: Re: JavaScript Statement Question


  Hi Jim:
  Here is the actual article I'm evaluating.  I get everything except that 
bloody {0}
  It's not very long  and you can just blast to where I labeled RtHere if you 
want to see it used in context.
  Here is the original article:
   devised the followingsolution.
  First, the TreeView knows which node is selected because
  SelectedNode
   is a property of the TreeView control. This information has to be stored 
somewhere,
  nd what is selected ultimately is rendered as HTML. If I know the ID of the 
selected
  HTML control, then I should be able to scroll and focus it. Sure enough, if 
you look
  at the source HTML of a page with a TreeView on it, you will find the 
declaration
  of a hidden <INPUT> tag-think text box-whose ID is approximately
  RtHere, this is what the GetElementId will point to to get the value.
  TreeViewx_SelectedNode:
  <input type="hidden" name="TreeView1_SelectedNode" id="TreeView1_SelectedNode"
  value="TreeView1t54" />
  With this knowledge, the idea is that a hidden input control is basically a 
textbox
  and all you need to do is figure out what the contents are. A TreeView is 
rendered
  as an HTML table-that's all ASP.NET controls are, little HTML code 
generators-and
  the value field is the client identifier of a table cell, a <TD> tag 
representing
  the node. So find the ID of the cell tag, scroll it into view, and you are 
done.
  [Note to ASP.NET team: This should be a property of the TreeView. Thank you.]
  To demonstrate, I wrote some code to generate a really full TreeView. The
  Page_Load
   event injects some JavaScript to find and focus the table cell (see Listing 
1) and
  the <body> tag's
  onload event calls this injected function.
  Listing 1: The Code Behind That Fills a Treeview and Injects the JavaScript
  Imports System.Collections.Generic
  Partial Class _Default
  Inherits System.Web.UI.Page
  Protected Sub Page_Load(ByVal sender As Object, _
  ByVal e As System.EventArgs) Handles Me.Load
  InjectLoadEvent()
  If (IsPostBack) Then Return
  TreeView1.Nodes.Clear()
  Dim chicken As New TreeNode("Chicken")
  TreeView1.Nodes.Add(chicken)
  Dim beef As New TreeNode("Beef")
  TreeView1.Nodes.Add(beef)
  RtHere, I removed the rest of the demo nodes.
  TreeView1.CollapseAll()
  End Sub
  Public Sub InjectLoadEvent()
  Dim script As String = _
  "function LoadEvent()" + _
  {" + _
  " try" + _
  " {{" + _
  RtHere: here is the actual statement.
  The rendered Html is below.
  "   var elem = document.getElementById('{0}_SelectedNode');" + _"   if(elem 
!= null )" + _
  "   {{" + _
  "     var node = document.getElementById(elem.value);" + _
  "     if(node != null)" + _
  "     {{" + _
  "       node.scrollIntoView(true);" + _
  "       {1}.scrollLeft = 0;" + _
  "     }}" + _
  "   }}" + _
  " }}" + _
  " catch(oException)" + _
  " {{}}" + _
  "}}"
  Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "LoadEvent", _
  String.Format(script, TreeView1.ClientID, Panel1.ClientID), True)
  End Sub
  End Class
  Listing 2 shows the complete page.
  Listing 2: The ASP Code That Defines the Appearance of this Relatively Simple 
Page
  <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 
Inherits="_Default"
  %>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
  <html xmlns="http://www.w3.org/1999/xhtml"; >
  <head runat="server">
  <title>Focus Tree Node on Postback</title>
  </head>
  <body onload="LoadEvent()">
  <form id="form1" runat="server">
  <div>
  <asp:Panel ID="Panel1" runat="server" Height="200px" Width="200px" 
ScrollBars="Both">
  <asp:TreeView ID="TreeView1" runat="server">
  <SelectedNodeStyle BackColor="#8080FF" />
  </asp:TreeView>
  </asp:Panel>
  </div>
  </form>
  </body>
  </html>
  Figure 1 presents an example of what the simple page looks like.
  Click here for a larger image.
  Figure 1: A TreeView Nested in a Scrollable Panel Control (in IE7)
  Finally, Listing 3 shows the resultant JavaScript, which is the interesting 
part.
  RtHere:, the rendered version.
  Listing 3: The Injected JavaScript
  <script>
  function LoadEvent()
  {
  try
  {
  var elem = document.getElementById('TreeView1_SelectedNode');
  if(elem != null )
  {
  var node = document.getElementById(elem.value);
  if(node != null)
  {
  node.scrollIntoView(true);
  Panel1.scrollLeft = 0;
  }
  }
  }
  catch(oException)
  {}
  }// -->
  </script>
  The JavaScript function
  LoadEvent
   finds the hidden input field. I injected all of the code expect the
  ClientID
   of the TreeView, which in this case is TreeView1 but in deeply nested pages 
can
  have an ungodly long name. When I get that control, I use its value property 
to find
  the table cell, and with that control I invoke
  scrollIntoView. The scrollLeft
  f property keeps the Panel scrolled to the left. And it works!

    ----- Original Message ----- 
    From: Jim 
    To: programmingblind@xxxxxxxxxxxxx 
    Sent: Sunday, October 21, 2007 10:40 AM
    Subject: Re: JavaScript Statement Question


    Hi Richard,
    I think it should be brackets rather than braces. Brackets contain indexes 
to array items.

    Thanks.

    Jim
    __________
    Take back your shopping life at http://tinyurl.com/32rsxz

      ----- Original Message ----- 
      From: Richard Thomas 
      To: programmingblind@xxxxxxxxxxxxx 
      Sent: Sunday, October 21, 2007 7:55 AM
      Subject: JavaScript Statement Question


          Hi:
      In this statement what is the '{0}'?
      "   var elem = document.getElementById('{0}_SelectedNode');" I know the 
single parameter inside the GetElementById is the Id Tagg value of the control 
to look up but the tag he looks up has an id of something like 
Panel1_SelectedNode that it looks like he may be replacing with the {0} in the 
GetElementById Statement.
      haven't found anything, actually too much, on the statement but nothing 
using '{0}'.
      What is it called, index or something and what does it mean?  I'll dig 
around more if I can find something to google on that points to this particular 
syntax.
      My guess is it has to do with a Document Control relative Reference or 
something but I just can't find anything like it googling so far.
      Thanks:Rick Farmington Mich. USA

       

Other related posts: