[CLOSED] TreePanel css style changing background color configuration is not working ?

  1. #1

    [CLOSED] TreePanel css style changing background color configuration is not working ?

    I am using Ext.Net classic 7.3 version for coding.
    It always show white background color of TreePanel css sytle changing background color configuration.
    How do I change TreePanel background color ?
    Last edited by fabricio.murta; Jun 01, 2023 at 5:45 AM.
  2. #2
    Hello, @richardliu, and welcome to Ext.NET!

    There's a discussion on changing the tree panel's background color at this topic: Change TreePanel background color and toolbar color.

    It is for previous Ext.NET versions, but still applies to Ext.NET 7. Let us know if, for some reason, it doesn't work for you.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    We refer to the topic: Change TreePanel background color and toolbar color.
    And change the sample code as the topic described,but still can not get expected background color.
    Some area background color is changed,but the central TreePanel background color is still white without changing.
    Please the attached image.
    Click image for larger version. 

Name:	TreePanel background color.png 
Views:	52 
Size:	48.4 KB 
ID:	25622
  4. #4
    Hello again, @richardLiu!

    I get you're using the Tree Panel > Basic > Built in Markup example as a base for the test case, right?

    For some reason, in that example and applying the CSS from the suggested thread, I couldn't even reproduce the result you got by applying the styles. It painted blue all around. I have tried to simplify the CSS rule to a minimal, and using different colors to highlight where they apply. The only things that actually changed from the referenced topic were the rules for the row selected and mouse over highlights, where they changed from row to item.

    So from the example linked above, all you'd have to do is:

    1. add this <style> block inside the example's <head> block:

    <style type="text/css">
        .my-tree .x-panel-body 
        {
            background-color: #000080;
        }
            
        .my-tree .x-toolbar 
        {
            background-image: none;
            background-color: #30A080;
        }
    
        .my-tree .x-grid-row .x-grid-cell {
            background-color: #000080;
        }
    
        .my-tree .x-grid-item-over .x-grid-cell {
            background-color: #0080FF;
        }
    
        .my-tree .x-grid-item-selected .x-grid-cell {
            background-color: #00ff60;
        }
    </style>
    2. tell the tree panel it should use the my-tree CSS class by adding this to the ext-treePanel properties:

    cls="my-tree"
    For reference, it could go, say, after the scrollable="true" property, but anywhere in the tree list of properties should do.

    In the end, the example should look like this source-code wise:

    @page
    @model ExtNet7WebPages_NuGet.Pages.Forums._6._3._3_6.c63372_treePanelBgColorModel
    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
        <head>
            <title>
                TreePanel built using TagHelpers - Ext.NET Examples
            </title>
            <link href="/resources/css/examples.css" rel="stylesheet" />
            <style type="text/css">
                .my-tree .x-panel-body 
                {
                    background-color: #000080;
                }
            
                .my-tree .x-toolbar 
                {
                    background-image: none;
                    background-color: #30A080;
                }
    
                .my-tree .x-grid-row .x-grid-cell {
                    background-color: #000080;
                }
    
                .my-tree .x-grid-item-over .x-grid-cell {
                    background-color: #0080FF;
                }
    
                .my-tree .x-grid-item-selected .x-grid-cell {
                    background-color: #00ff60;
                }
            </style>
        </head>
        <body>
            <h1>
                TreePanel built using TagHelpers
            </h1>
            <ext-treePanel
                id="TreePanel1"
                width="480"
                height="600"
                frame="true"
                iconCls="x-md md-icon-menu-book"
                title="Catalog"
                scrollable="true"
                cls="my-tree">
                <tbar>
                    <ext-toolbar>
                        <items>
                            <ext-button text="Expand All">
                                <listeners>
                                    <click handler="App.TreePanel1.expandAll();" />
                                </listeners>
                            </ext-button>
                            <ext-button text="Collapse All">
                                <listeners>
                                    <click handler="App.TreePanel1.collapseAll();" />
                                </listeners>
                            </ext-button>
                        </items>
                    </ext-toolbar>
                </tbar>
                <root>
                    <ext-treeNode text="Composers" expanded="true">
                        <children>
                            <ext-treeNode text="Beethoven" iconCls="x-md md-icon-person">
                                <children>
                                    <ext-treeNode text="Concertos">
                                        <children>
                                            <ext-treeNode text="No. 1 - C" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 2 - B-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 3 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 4 - G Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 5 - E-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                    <ext-treeNode text="Quartets">
                                        <children>
                                            <ext-treeNode text="Six String Quartets" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Three String Quartets" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Grosse Fugue for String Quartets" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                    <ext-treeNode text="Sonatas">
                                        <children>
                                            <ext-treeNode text="Sonata in A Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="sonata in F Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                    <ext-treeNode text="Symphonies">
                                        <children>
                                            <ext-treeNode text="No. 1 - C Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 2 - D Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 3 - E-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 4 - B-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 5 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 6 - F Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 7 - A Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 8 - F Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 9 - D Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                </children>
                            </ext-treeNode>
                            <ext-treeNode text="Brahms" iconCls="x-md md-icon-person">
                                <children>
                                    <ext-treeNode text="Concertos">
                                        <children>
                                            <ext-treeNode text="Violin Concerto" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Double Concerto - A Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Piano Concerto No. 1 - D Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Piano Concerto No. 2 - B-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                    <ext-treeNode text="Quartets">
                                        <children>
                                            <ext-treeNode text="Piano Quartet No. 1 - G Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Piano Quartet No. 2 - A Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Piano Quartet No. 3 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Piano Quartet No. 3 - B-Flat Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                    <ext-treeNode text="Sonatas">
                                        <children>
                                            <ext-treeNode text="Two Sonatas for Clarinet - F Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Two Sonatas for Clarinet - E-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                    <ext-treeNode text="Symphonies">
                                        <children>
                                            <ext-treeNode text="No. 1 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 2 - D Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 3 - F Major" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="No. 4 - E Minor" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                </children>
                            </ext-treeNode>
                            <ext-treeNode text="Mozart" iconCls="x-md md-icon-person">
                                <children>
                                    <ext-treeNode text="Concertos">
                                        <children>
                                            <ext-treeNode text="Piano Concerto No. 12" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Piano Concerto No. 17" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Clarinet Concerto" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Violin Concerto No. 5" iconCls="x-md md-icon-music-note" leaf="true" />
                                            <ext-treeNode text="Violin Concerto No. 4" iconCls="x-md md-icon-music-note" leaf="true" />
                                        </children>
                                    </ext-treeNode>
                                </children>
                            </ext-treeNode>
                        </children>
                    </ext-treeNode>
                </root>
                <bbar>
                    <ext-toolbar>
                        <items>
                            <ext-label id="lblStatus" html=" " />
                        </items>
                    </ext-toolbar>
                </bbar>
                <listeners>
                    <itemClick handler="App.lblStatus.setHtml('Node Selected: <strong>' + record.get('text') + '</strong>')" />
                    <afterItemExpand handler="App.lblStatus.setHtml('Node Expanded: <strong>' + node.get('text') + '</strong>')" buffer="30" />
                    <afterItemCollapse handler="App.lblStatus.setHtml('Node Collapsed: <strong>' + node.get('text') + '</strong>')" buffer="30" />
                </listeners>
            </ext-treePanel>
        </body>
    </html>
    and like this, visually:

    Click image for larger version. 

Name:	63372-treePanelColoredBg.png 
Views:	45 
Size:	35.5 KB 
ID:	25623

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5

    Great ! Thank you for the solution.

    According to your code sample, it works and resolve our problem.
    Thanks !
    Click image for larger version. 

Name:	Changing TreePanel background color.jpg 
Views:	46 
Size:	90.9 KB 
ID:	25625
    Attached Thumbnails Click image for larger version. 

Name:	TreePanel background color.png 
Views:	45 
Size:	48.4 KB 
ID:	25624  
  6. #6
    Glad it helped, thanks for the feedback!

    I'll mark the thread as closed now. Feel free to post another message here if you need to continue on the subject.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Changing Chart Background Color
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 22, 2013, 11:55 AM
  2. Replies: 7
    Last Post: Jul 11, 2012, 2:12 PM
  3. [CLOSED] Changing the background color of htmleditor
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 18, 2012, 6:41 PM
  4. Changing TreePanel background color
    By wexman in forum 1.x Help
    Replies: 3
    Last Post: Apr 06, 2011, 3:35 PM
  5. [CLOSED] Changing background color of TabPanel on the fly
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 07, 2010, 1:23 PM

Tags for this Thread

Posting Permissions