Setting Styles

[Ken]

I'm trying to set a few styles on my RadTree - but keep getting odd results.  I have one static root node then I'm gettin a dataset and looping over it and adding a node to this parent node via rtMailingList.Nodes[0].Nodes.Add(siteNode);
my definition of the tree looks as such.

<

telerik:RadTreeView ID="rtMailingList" ShowLineImages="false" runat="server" CausesValidation="false">

<Nodes>

<telerik:RadTreeNode Text="Mailing Lists" Value="ML" ContextMenuID="null" PostBack="false"/>

</Nodes>

</telerik:RadTreeView>

I'm trying to override the base styles and use a min height  -but I can't get all the nodes to min size and when I hover over a node my hover style applies but I jump all over the place.. Here are my styles.

.RadTreeView,
.RadTreeView a.rtIn,
.RadTreeView .rtEdit .rtIn .rtSp .rtLI input

{

display:block;
border-width: 0 0 1px 0;
border-style:dotted;
border-color:#e6e6e6;
color: #a22f01;
min-height:20px;
padding:5px 5px 0 5px;

}

.RadTreeView .rtSelected .rtIn

{

display:block;
border-width: 0 0 1px 0;
border-style:dotted;
background-color: #a22f01;
background-color:#ffad38;
min-height:20px;
padding:5px 5px 0 5px;
color:#fff;
background:#a22f01 url(/images2/arrow.png) right no-repeat;
}

.RadTreeView .rtHover .rtIn
{
display:block;
border-width: 0 0 1px 0;
border-style:dotted;
border-color:#e6e6e6;
color: #a22f01;
background-color:#ffad38;
min-height:20px;
padding:5px 5px 0 5px;
}

[Yana]

Hello Ken,

Thank you for contacting us.

Please add the following modified css styles to your project:

<style type="text/css">
 .RadTreeView_Default .rtIn,
 .RadTreeView_Default .rtEdit {
    border: 1px dotted #e6e6e6 !important;
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    color: #a22f01 !important;
    min-height:20px !important;
    padding:5px 5px 0 5px !important;
 }

 .RadTreeView_Default .rtSelected .rtIn {
    border: 1px dotted #e6e6e6 !important;
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    background-color: #a22f01 !important;
    background-color:#ffad38 !important;
    min-height:20px !important;
    padding:5px 5px 0 5px !important;
    color:#fff !important;
    background:#a22f01 url(/images2/arrow.png) rightright no-repeat !important;
 }

 .RadTreeView_Default .rtHover .rtIn {
    border: 1px dotted #e6e6e6 !important;
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    color: #a22f01 !important;
    background:#ffad38 !important;
    min-height:20px !important;
    padding:5px 5px 0 5px !important;
 }
</style>

Hope this helps.

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ken]

This sort of works.. the varying sizes have gone away in the tree.  But it looks like the default style is still showing above the style I'm trying to apply.  For a selected node my style is showing - but the noral greyish back ground is showing above it.  Shouldn't overriding those base styles keeps that stuff from displaying?

[Yana]

Hello Ken,

Please check the attached sample project, which shows RadTreeView with modified styles. It works as expected at our side.

Kind regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.