[CLOSED] Is it possible to apply CSS to a node text in a TreePanel?

  1. #1

    [CLOSED] Is it possible to apply CSS to a node text in a TreePanel?

    Hi,

    I have the following questions about a TreePanel node.

    1. Is it possible to apply CSS to a node text in a TreePanel?

    2. Also can I change the background that shows when the mouse is hover a node and when the node is selected?

  2. #2

    RE: [CLOSED] Is it possible to apply CSS to a node text in a TreePanel?



    Hi,

    If it is not possible to apply CSS to a node text in a TreeView, could you tell me please if is it possible to change the text font and color?

  3. #3

    RE: [CLOSED] Is it possible to apply CSS to a node text in a TreePanel?

    Hi,

    Please see the following sample
    <%@ 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 runat="server">
        <title></title>
        
        <style type="text/css">
            .my-node a span{
                color:Red;
            }
            
            /*Over node background color*/
            .x-tree-node .x-tree-node-over{
                background: #E7FFD1;
            }
            
            /*background color of the selected node*/
            .x-tree-node .x-tree-selected{
                background: green;
            }
            
            /*color of the selected node*/
            .x-tree-selected a span{
                font-weight:bold;
            }       
            
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
               
            
            <ext:TreePanel 
                ID="TreePanel1" 
                runat="server" 
                Width="300" 
                Height="450" 
                Title="Catalog" 
                AutoScroll="true">
                <Root>
                    <ext:TreeNode Text="Composers" Expanded="true">
                        <Nodes>
                            <ext:TreeNode Text="Beethoven" Icon="UserGray" Cls="my-node">
                            </ext:TreeNode>
                            <ext:TreeNode Text="Brahms" Icon="UserGray">
                            </ext:TreeNode>
                            <ext:TreeNode Text="Mozart" Icon="UserGray">
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
            </ext:TreePanel>
        </form>
    </body>
    </html>

Similar Threads

  1. how to apply css for dataview empty text?
    By i3class in forum 1.x Help
    Replies: 1
    Last Post: May 23, 2012, 10:22 AM
  2. [CLOSED] Apply mask after setting Text
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 23, 2011, 2:51 PM
  3. [CLOSED] How to apply spaces between TreePanel nodes using CSS?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 05, 2010, 6:36 PM
  4. [CLOSED] [1.0] EditableGrid Apply to selection apply to all
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 24, 2010, 5:49 PM
  5. TreePanel:Copying from one node to another node using drag and drop
    By eighty20 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 25, 2009, 7:48 AM

Posting Permissions