RadTreeView Control Skinned Like a Menu

[Timothy Kruszewski]

I have an ComponentArt treeview control that is skinned to look like a menu control per my clients request.  It looks and work perfect except for that fact it is not a Telerik control.  I would love to use the RadTreeView control but I cannot figure out all of the css components needed to make it work properly.  Please see the attached image of the two controls side by side and you will see what I am trying to accomplish.  I followed the example of how to create your own skin which was very useful but I just can't figure out what I'm missing.

 

.RadTreeView_Skins,
.RadTreeView_Skins a.rtIn,
.RadTreeView_Skins .rtEdit .rtIn input
{
        background-image: url(TreeView/item_bg.gif);

    background-color:#666666;
    border: 1px solid #666666;
    font-family: arial, verdana;
    font-size: 10px;
    font-weight: bold;
}

.RadTreeView_Skins .rtPlus,
.RadTreeView_Skins .rtMinus
{
    background-image: url('TreeView/plusminus.png');
}

.RadTreeView_Skins .rtChecked,
.RadTreeView_Skins .rtUnchecked,
.RadTreeView_Skins .rtIndeterminate
{
    background-image: url('TreeView/TriState.png');
}

.RadTreeView_Skins .rtHover .rtIn
{
    background-image: url(TreeView/item_Expanded_bg.gif);
    border: 1px solid white;
    font-family: arial, verdana;
    font-size: 10px;
    font-weight: bold;
    cursor:hand;
    color:#000;
    width:350px;
}

.RadTreeView_Skins .rtSelected .rtIn
{
    background-image: url(TreeView/item_expanded_bg.gif);
    border: 1px solid white;
    font-family: arial, verdana;
    font-size: 10px;
    font-weight: bold;
    cursor:hand;
    color:#000;
    width:350px;
}

.RadTreeView_Skins .rtSelected .rtLoadingBefore,
.RadTreeView_Skins .rtSelected .rtLoadingAfter,
.RadTreeView_Skins .rtSelected .rtLoadingBelow
{
    color: #333;
}

.RadTreeView_Skins .rtLoadingIcon
{
    background-image: url('TreeView/LoadingIcon.gif');
}

.RadTreeView_Skins .rtLI .rtEdit .rtIn
{
    border-color: #6c6c6c;
    background: #fff;
}

.RadTreeView_Skins_disabled .rtIn,
.RadTreeView_Skins .rtDisabled .rtIn
{
    color: #ccc;

}

[Peter]

Hello Timothy,

I am not familiar with the ComponentArt treeview control, but looking at the screenshot your sent, it resembles very much our RadPanelBar control. My recommendation is you consider using RadPanelBar and create a custom skin with our visual style builder tool. I believe this would be a neater solution to your requirement.


Kind regards,
Peter
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.