[CLOSED] Adding additional markup to selected TreePanel node

  1. #1

    [CLOSED] Adding additional markup to selected TreePanel node

    I have a TreePanel. When a node is selected I need to add additional markup to the right of the selected node text. Initially I tried using the setText() method; i.e. node.setText(node.text + "<b>test</b>"); but this causes a cross-site scripting error on AjaxRequests. I guess the text can't include tags.

    I then tried setting the innerHTML for the selected node. This works fine, except that the node elbows no longer display correctly. The following, based on your TreePanel example, demonstrates the problem;

    1) Expand/Collapse the Beethoven node. The expand icon shows 'plus' when collapsed and 'minus' when expanded.

    2) Now select the Beethoven node. The additional markup is correctly added to the right of the node text. However the expand icon no longer changes when the node is expanded/collapsed.

    How can I add the markup and still get the node elbows to display correctly?

    - thanks


    <head runat="server">
        <title></title>
    
        <script type="text/javascript">
    
            function nodeSelect(sel, newNode, prevNode) {
    
                newNode.ui.elNode.innerHTML += "<b>test</b>";
                 
            }
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:TreePanel ID="TreePanel1" runat="server"  Width="300" Height="450" Icon="BookOpen" Title="Catalog" AutoScroll="true">
                <Root>
                    <ext:TreeNode Text="Composers" Expanded="true">
                        <Nodes>
                            <ext:TreeNode Text="Beethoven" Icon="UserGray">
                                <Nodes>
                                    <ext:TreeNode Text="Concertos" />
                                    <ext:TreeNode Text="Quartets" />
                                    <ext:TreeNode Text="Sonatas" />
                                    <ext:TreeNode Text="Symphonies" />
                                 </Nodes>
                            </ext:TreeNode>
                            <ext:TreeNode Text="Brahms" Icon="UserGray">
                                <Nodes>
                                    <ext:TreeNode Text="Concertos" />
                                    <ext:TreeNode Text="Quartets" />
                                </Nodes>
                            </ext:TreeNode>
                            <ext:TreeNode Text="Mozart" Icon="UserGray">
                                <Nodes>
                                    <ext:TreeNode Text="Concertos" />
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
                <SelectionModel>
                    <ext:DefaultSelectionModel>
                        <Listeners>
                            <BeforeSelect Fn="nodeSelect" />
                        </Listeners>
                    </ext:DefaultSelectionModel>
                </SelectionModel>
            </ext:TreePanel>
        </form>
    </body>
    Last edited by Daniil; Nov 22, 2011 at 3:52 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I'd recommend to update a text node.
    newNode.setText(newNode.attributes.text + "    <b>test</b>");
  3. #3
    Hi Daniil

    Unfortunately setText doesn't work if the page does DirectEvents. You can demonstrate this by adding a simple ext:button wired to a Click DirectEvent, to my sample. Using setText to add the markup, and then clicking the button causes a cross-site scripting IIS error. I suspect the tags in the markup are causing the problem. Disabling RequestValidation would probably prevent the error but I'd rather not do that.
  4. #4
    Could you provide a sample to reproduce the?

    I was unable to reproduce.
  5. #5
    Here is the full sample, which is similar to above.

    If you select the first node, the markup "<b>test</b>" is successfully added to the text. However if you then click the 'Do Something' button the following IIS error is generated.

    Exception Details: System.Web.HttpRequestValidationException: A potentially dangerous Request.Form value was detected from the client (treePanel1_SM="...Beethoven <b>test</b>","path":...").

    This is happening because ASP.NET Request Validation is being performed to protect against XSS attacks. I can disable this and avoid the error by setting ValidateRequest="false" in the page header, but would prefer not to do this.



    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestTreePanel2.aspx.vb" Inherits="TestTreePanel2" ValidateRequest="true"  %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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></title>
    
        <script type="text/javascript">
    
            function nodeSelect(sel, newNode, prevNode) {
    
                newNode.setText(newNode.attributes.text + " <b>test</b>");
                                   
            }
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:TreePanel ID="treePanel1" runat="server"  Width="300" Height="450" Icon="BookOpen" Title="Catalog" AutoScroll="true">
                <Root>
                    <ext:TreeNode Text="Composers" Expanded="true">
                        <Nodes>
                            <ext:TreeNode Text="Beethoven" Icon="UserGray">
                                <Nodes>
                                    <ext:TreeNode Text="Concertos" />
                                    <ext:TreeNode Text="Quartets" />
                                    <ext:TreeNode Text="Sonatas" />
                                    <ext:TreeNode Text="Symphonies" />
                                 </Nodes>
                            </ext:TreeNode>
                            <ext:TreeNode Text="Brahms" Icon="UserGray">
                                <Nodes>
                                    <ext:TreeNode Text="Concertos" />
                                    <ext:TreeNode Text="Quartets" />
                                </Nodes>
                            </ext:TreeNode>
                            <ext:TreeNode Text="Mozart" Icon="UserGray">
                                <Nodes>
                                    <ext:TreeNode Text="Concertos" />
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
                <SelectionModel>
                    <ext:DefaultSelectionModel>
                        <Listeners>
                            <BeforeSelect Fn="nodeSelect" />
                        </Listeners>
                    </ext:DefaultSelectionModel>
                </SelectionModel>
            </ext:TreePanel>
            
            <ext:Button ID = "cmdTest" runat="server" Text="Do Something">
                <DirectEvents>
                    <Click OnEvent= "cmdTest_Click"></Click>
                </DirectEvents>
            </ext:Button>
    
        </form>
    </body>
    </html>
        Protected Sub cmdTest_Click(ByVal sender As Object, ByVal e As DirectEventArgs)
            '   Do Something
    
        End Sub
  6. #6
    Yes, I forgot that selected nodes are submitted automatically.

    Then I can suggest to directly change innerHTML of textNode.
    newNode.ui.textNode.innerHTML += " <b>test</b>";
  7. #7
    Daniil - that worked great! You can mark this as closed.

    - thanks

Similar Threads

  1. [CLOSED] TreePanel scrollbar does not scroll to selected node
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Feb 09, 2012, 11:30 AM
  2. Replies: 2
    Last Post: Oct 10, 2011, 1:29 AM
  3. Selected Node Id of a TreePanel
    By Z in forum 1.x Help
    Replies: 1
    Last Post: Jul 21, 2010, 8:26 AM
  4. Treepanel - Set Selected Node
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Dec 01, 2009, 4:46 PM
  5. [CLOSED] TreePanel selected node
    By alainfo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 24, 2009, 6:47 AM

Posting Permissions