Change Background Color of Selected Node in FileExplorer TreeView

[Dean Workman]

I have a FileExplorer control that displays a directory structure in a tree/grid combination.  I have successfully changed the style of the grid so that the selected rows are the color that I want, but I cannot figure out how to change the color of the selected node in the tree.

Can anyone help me out?

[Dobromir]

Hi Dean,

The  CSS selector which corresponds to the RadTreeView's selected node is named .rtSelected .rtIn. In order to change the background you can use the following css class:

.rtSelected .rtIn
{
    background-color: lime !important;
    background-image: none !important;
    color: brown !important;
}

Please note the !important rule - it should be set to override the default values.

I hope this helps.

Sincerely,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[adnan]

is there any way to show any image at right side of selected treenode... ???

[Bozhidar]

Hi Dean,

To show the predefined images form the sprite on the right side, you should overwrite the existing base CSS styles with the following:

.rfeFileExtension
        {
            background-position: right -681px !important;
        }

        td .folder
        {
            background-position: right -1224px !important;
        }

        .RadFileExplorer td .folderup
        {
            background-position: right -1256px !important;
        }

        .RadFileExplorer td .gif
        {
            background-position: right -39px !important;
        }

        .RadFileExplorer td .html, .RadFileExplorer td .htm, .RadFileExplorer td .xhtml, .RadFileExplorer td .hta
        {
            background-position: right -71px !important;
        }

        .RadFileExplorer td .exe, .RadFileExplorer td .bat
        {
            background-position: right -967px !important;
        }

        .RadFileExplorer td .rar, .RadFileExplorer td .zip, .RadFileExplorer td .ace
        {
            background-position: right -102px !important;
        }

        .RadFileExplorer td .psd, .RadFileExplorer td .pdd
        {
            background-position: right -135px !important;
        }

        .RadFileExplorer td .js
        {
            background-position: right -167px !important;
        }

        .RadFileExplorer td .vbs
        {
            background-position: right -999px !important;
        }

        .RadFileExplorer td .css
        {
            background-position: right -200px !important;
        }

        .RadFileExplorer td .txt
        {
            background-position: right -232px !important;
        }

        .RadFileExplorer td .asp
        {
            background-position: right -264px !important;
        }

        .RadFileExplorer td .aspx
        {
            background-position: right -296px !important;
        }

        .RadFileExplorer td .sln
        {
            background-position: right -327px !important;
        }

        .RadFileExplorer td .config
        {
            background-position: right -360px !important;
        }

        .RadFileExplorer td .cs
        {
            background-position: right -392px !important;
        }

        .RadFileExplorer td .vb
        {
            background-position: right -424px !important;
        }

        .RadFileExplorer td .doc,
        .RadFileExplorer td .docx,
        .RadFileExplorer td .rtf,
        .RadFileExplorer td .dot
        {
            background-position: right -456px !important;
        }

        .RadFileExplorer td .ppt,
        .RadFileExplorer td .pptx
        {
            background-position: right -488px !important;
        }

        .RadFileExplorer td .xls, .RadFileExplorer td .xlsx
        {
            background-position: right -519px !important;
        }

        .RadFileExplorer td .ascx
        {
            background-position: right -550px !important;
        }

        .RadFileExplorer td .jpg,
        .RadFileExplorer td .jpeg,
        .RadFileExplorer td .jpe
        {
            background-position: right -584px !important;
        }

        .RadFileExplorer td .png
        {
            background-position: right -615px !important;
        }

        .RadFileExplorer td .mdb
        {
            background-position: right -648px !important;
        }

        .RadFileExplorer td .csproj
        {
            background-position: right -711px !important;
        }

        .RadFileExplorer td .webinfo
        {
            background-position: right -744px !important;
        }

        .RadFileExplorer td .vbproj
        {
            background-position: right -775px !important;
        }

        .RadFileExplorer td .pdf
        {
            background-position: right -808px !important;
        }

        .RadFileExplorer td .bmp
        {
            background-position: right -840px !important;
        }

        .RadFileExplorer td .swf
        {
            background-position: right -872px !important;
        }

        .RadFileExplorer td .tif, .RadFileExplorer td .tiff
        {
            background-position: right -904px !important;
        }

        .RadFileExplorer td .mpg,
        .RadFileExplorer td .mpeg,
        .RadFileExplorer td .avi,
        .RadFileExplorer td .gp3,
        .RadFileExplorer td .mov,
        .RadFileExplorer td .mpeg4,
        .RadFileExplorer td .aif,
        .RadFileExplorer td .aiff,
        .RadFileExplorer td .rm,
        .RadFileExplorer td .wmv
        {
            background-position: right -936px !important;
        }

        .RadFileExplorer td .mp3,
        .RadFileExplorer td .mp4,
        .RadFileExplorer td .mid,
        .RadFileExplorer td .midi,
        .RadFileExplorer td .wav,
        .RadFileExplorer td .gp3,
        .RadFileExplorer td .gp4,
        .RadFileExplorer td .gp5,
        .RadFileExplorer td .wma,
        .RadFileExplorer td .ogg
        {
            background-position: right -1031px !important;
        }

        .RadFileExplorer td .fla, .RadFileExplorer td .flv
        {
            background-position: right -1063px !important;
        }

        .RadFileExplorer td .dll
        {
            background-position: right -1095px !important;
        }

        .RadFileExplorer td .xml
        {
            background-position: right -1127px !important;
        }

        .RadFileExplorer td .xslt
        {
            background-position: right -1159px !important;
        }

        .RadFileExplorer td .xsl
        {
            background-position: right -1191px !important;
        }

        .RadFileExplorer td .bac
        {
            background-position: right -681px;
        }

Attached is feright.gif showing how FileExplorer will be rendered when the above CSS is applied.

All the best,
Bojo
the Telerik team