[CLOSED] TreePanel using AjaxMethod - Selection issue

  1. #1

    [CLOSED] TreePanel using AjaxMethod - Selection issue

    
    <%@ Page Language="C#" %>
    
    <%@ 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 id="Head1" runat="server">
        <title>TreePanel using Ajax Method - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <script runat="server">
    
            [DirectMethod]
            public static string NodeLoad(string nodeID)
            {
                Ext.Net.TreeNodeCollection nodes = new Ext.Net.TreeNodeCollection();
    
                if (!string.IsNullOrEmpty(nodeID))
                {
                    for (int i = 1; i < 6; i++)
                    {
                        AsyncTreeNode asyncNode = new AsyncTreeNode();
                        asyncNode.Text = nodeID + i + "TRALALA BLAH BLAH BLAH";
                        asyncNode.NodeID = nodeID + i;
                        nodes.Add(asyncNode);
                    }
    
                    for (int i = 6; i < 11; i++)
                    {
                        Ext.Net.TreeNode treeNode = new Ext.Net.TreeNode();
                        treeNode.Text = nodeID + i;
                        treeNode.NodeID = nodeID + i;
                        treeNode.Leaf = true;
                        nodes.Add(treeNode);
                    }
                }
    
                return nodes.ToJson();
            }
        </script>
        
        <script type="text/javascript">
            function nodeLoad(node) {
                Ext.net.DirectMethods.NodeLoad(node.id, {
                    success: function (result) {
                        var data = eval("(" + result + ")");
                        node.loadNodes(data);
                    },
    
                    failure: function (errorMsg) {
                        Ext.Msg.alert('Failure', errorMsg);
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>TreePanel using Ajax Method</h1>         
            
            <ext:TreePanel 
                ID="TreePanel1" 
                runat="server" 
                Title="Tree" 
                AutoHeight="true" 
                Border="false"
                Width="100"
                AutoScroll="true">
                <Root>
                    <ext:AsyncTreeNode NodeID="0" Text="Root" />
                </Root>
                <Listeners>
                    <BeforeLoad Fn="nodeLoad" />
                </Listeners>
                  <SelectionModel>
                            <ext:DefaultSelectionModel>
                            </ext:DefaultSelectionModel>
                        </SelectionModel>
            </ext:TreePanel>       
        </form>
    </body>
    </html>
    The above is a https://examples1.ext.net/#/TreePane...Method_Loader/ with a small modification:

    1. Width="100"
    2. AutoScroll = "true"
    3. node text enlarged

    When I select a node only the 100px are selected - if I use a horizontal scroll bar the rest is with the white background.

    Is there a way to have the item node text fully selected (blue background for a complete node text)?
    Last edited by Daniil; Jan 06, 2012 at 9:54 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please use the following CSS rule.
    <style type="text/css">
        .x-tree-node .x-tree-selected a.x-tree-node-anchor span {
            background-color: #D9E8FB;
        }
    </style>
  3. #3
    Yeah this works...

    Anyway there is a little narrowing near the end (1pixel I guess)...
  4. #4
    here it is
    Attached Thumbnails Click image for larger version. 

Name:	Treepanel.jpg 
Views:	87 
Size:	60.2 KB 
ID:	3668  
  5. #5
    Does the following rule help? Please remove the previous rule before an attempt.

    Example
    <style type="text/css">
        .x-tree-node .x-tree-selected {
            width: 100%;
        }
    </style>
  6. #6
    not exactly, this is the same as with no rule.
  7. #7
    Please use the following rules:
    <style type="text/css">
        .x-tree-node .x-tree-selected a span {
            background-color: #D9E8FB;
        }
            
        .x-tree-node a span, .x-dd-drag-ghost a span {
            padding: 3px 3px 3px 2px;
        }
    </style>
  8. #8
    yes this works, thx.

Similar Threads

  1. [CLOSED] TreePanel Clear Root Nodes, Add More from AjaxMethod
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Jun 25, 2014, 4:33 PM
  2. [CLOSED] Data selection case sensitive on Store with row selection issue
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 20, 2010, 2:30 PM
  3. Replies: 0
    Last Post: Nov 25, 2009, 6:24 AM
  4. [CLOSED] TreePanel + AjaxMethod + AsyncNode + Root
    By state in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 08, 2009, 8:01 AM
  5. [CLOSED] AjaxMethod issue
    By Rod in forum 1.x Help
    Replies: 4
    Last Post: Oct 06, 2008, 6:23 AM

Tags for this Thread

Posting Permissions