i had provided some styles for treeview highlighting, so that the entire node remains selected, instead of the text itself. But as the horizontal scrollbar starts coming in the tree, the highlighting doesnt take the entire treeview expanded width. I have attached an image of the same. The image has two images aligned horizontally, which depicts the mouse over effect when the scrollbar appears in the treeview and when u are some levels deep. I am also pasting a aspx code for the same.
Can you please let me know where I am going wrong or missing anything ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
/*
Navigation Pane Style
*/
/* PANEL BAR*/
.navigationPaneHeader
{
background-color: #CFCFCF;
height: 20px;
width: 100%;
text-indent: 9px;
color: Black;
font: 12px Arial;
font-weight: bold;
}
.searchPaneHeader
{
background-color: #CFCFCF;
height: 20px;
width: 100%;
color: Black;
text-indent: 9px;
font: 12px Arial;
font-weight: bold;
margin: 0px;
border-bottom-width: 2px;
border-bottom-color: Red;
}
.rtUL .rtLines
{
width: 500px;
}
.RadPanelBar_Default
{
background: #fff;
}
div.RadPanelBar .rpImage
{
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-top: 0px;
vertical-align: top;
float: left;
}
div.RadPanelBar .rpText
{
margin-top: 5px;
padding-top: 3px;
font-size: 11px;
font-family: Arial;
}
.RadPanelBar_Default .rpRootGroup
{
border-color: #EEEEEE;
}
.RadPanelBar_Default a.rpLink, .RadPanelBar_Default div.rpHeaderTemplate, .RadPanelBar_Default .rpTemplate
{
color: #000000;
font: normal 13px Arial;
}
.RadPanelBar_Default div.rpHeaderTemplate, .RadPanelBar_Default a.rpLink
{
background-color: #EFEBEF;
border-color: #C0C0C0;
text-indent: 5px;
height: 30px;
}
.RadPanelBar_Default .rpOut
{
border-color: #EFEBEF;
}
.RadPanelBar_Default a.rpLink:hover
{
color: #000;
background-color: #F7DFA7;
border-color: #ff9b35;
}
.RadPanelBar_Default a.rpFocused, .RadPanelBar_Default a.rpExpanded, .RadPanelBar_Default a.rpSelected, .RadPanelBar_Default div.rpFocused, .RadPanelBar_Default div.rpExpanded, .RadPanelBar_Default div.rpSelected, .RadPanelBar_Default a.rpSelected:hover
{
background-color: #F7DFA7;
border-color: #ff9b35;
height: 30px;
}
/* END PANEL BAR*/
/* TREE VIEW CONTROL */
div.RadTreeView:focus
{
outline: none;
}
div.RadTreeView .rtSp
{
height: 14px;
}
div.RadTreeView .rtPlus
{
height: 11px;
width: 11px;
margin-top: 3px;
vertical-align: top;
display: inline-block;
cursor: pointer;
background-repeat: no-repeat;
}
div.RadTreeView .rtHover .rtIn, div.RadTreeView .rtSelected .rtIn
{
background-position: 0px 0px;
padding: 3px 3px 0px 3px;
border-style: none;
background-repeat: repeat-x;
}
.RadTreeView_Default .rtLoadingIcon
{
background-image: url('../Images/LoadingIcon.gif');
}
.RadTreeView_Default .rtLines .rtTop, .RadTreeView_Default .rtLines .rtMid, .RadTreeView_Default .rtLines .rtBot, .RadTreeView_Default .rtLines .rtLast .rtTop, .RadTreeView_Default .rtLines .rtFirst, .RadTreeView_Default .rtLines .rtFirst .rtUL, .RadTreeView_Default .rtLines .rtLI, .RadTreeView_Default .rtLines .rtFirst .rtUL
{
margin-top: 1px;
margin-bottom: 1px;
font-size: 11px;
}
.RadTreeView_Default .pluginHeaderNode
{
background-color: #F7F7F7;
font-family: Arial;
line-height: 15px;
vertical-align: middle;
height: 18px;
margin-top: 1px;
margin-bottom: 1px;
font-weight: bold;
color: #625A5A;
}
.RadTreeView_Default
{
color: #000000;
font: 12px Arial;
padding: 0px 1px 0px;
}
div.RadTreeView .rtIn
{
vertical-align: top;
padding-bottom: 0px;
}
.RadTreeView_Default .rtPlus, .RadTreeView_Default .rtMinus
{
margin: 0px;
background-image: url('../images/PlusMinus.png');
}
.RadTreeView_Default .rtSelected
{
border: 0;
background-color: #fcdb89;
}
.RadTreeView_Default .rtSelected .rtLoadingBefore, .RadTreeView_Default .rtSelected .rtLoadingAfter, .RadTreeView_Default .rtSelected .rtLoadingBelow
{
color: #333;
}
.RadTreeView_Default .rtTop:hover, .RadTreeView_Default .rtMid:hover, .RadTreeView_Default .rtBot:hover
{
border-color: #a79d87 #b89f73;
background-color: #FFE086;
}
.RadTreeView .rtLI
{
padding-bottom: 0px;
}
.RadTreeView .rtUL .rtUL
{
margin-top: 0px;
}
.RadTreeView .rtLast
{
padding-bottom: 0; /* prevent double-spacing */
}
/* END TREE VIEW CONTROL */
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
</asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<div>
<telerik:RadSplitter VisibleDuringInit="false" ID="RadSplitter1" runat="server" BorderWidth="0"
Height="100%" Width="100%">
<telerik:RadPane BorderWidth="0" ID="LeftPane" runat="server" Width="200" Scrolling="None"
MinWidth="200" Height="100%">
<telerik:RadSplitter ID="RadSplitter4" runat="server" BorderWidth="0" Height="100%"
Width="100%" Orientation="Horizontal">
<telerik:RadPane ID="navigationHostRadPane" BorderWidth="0" runat="server" Scrolling="None">
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="100%"
Width="100%">
<telerik:RadPageView Height="100%" Width="100%" ID="RadPageView1" runat="server"
Style="border-style: none">
<telerik:RadSplitter ID="nestedSplitter" ResizeWithParentPane="false" Width="100%"
Orientation="Horizontal" Height="100%" runat="server">
<telerik:RadPane ID="headerPane" runat="server" Height="20px">
<div class="navigationPaneHeader">
Header 1</div>
</telerik:RadPane>
<telerik:RadPane ID="treeViewPane" runat="server">
<telerik:RadTreeView ID="RadTreeView1" runat="server">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
<Nodes>
<telerik:RadTreeNode Text="Tree Node 1.1">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Tree Node 2" />
<telerik:RadTreeNode Text="Tree Node 3" />
<telerik:RadTreeNode Text="Tree Node 4" />
<telerik:RadTreeNode Text="Tree Node 5" />
</Nodes>
</telerik:RadTreeView>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server">
<div class="navigationPaneHeader">
Header 2</div>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" CollapseMode="Backward" EnableResize="false"
ID="navigationPaneSplitBar">
</telerik:RadSplitBar>
<telerik:RadPane ID="navigationRadPane" runat="server" Height="125px" Scrolling="None">
<telerik:RadPanelBar ID="NavigationItems" runat="server" ExpandMode="FullExpandedItem"
Visible="true" AccessKey="N" Height="100%" Width="100%" EnableEmbeddedSkins="false"
Skin="Default">
</telerik:RadPanelBar>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="MainPane" runat="server" Scrolling="None" MinWidth="600">
<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal">
<telerik:RadPane ID="RadPane2" runat="server" Height="15%" MaxHeight="300">
<div>
Test
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="RadPane1" runat="server" Scrolling="None">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Panel ID="ResultReadingPane" runat="server">
<telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Vertical" CssClass="SplitterResultsReading"
Width="100%">
<telerik:RadPane ID="RadPane3" runat="server" MinWidth="300" Scrolling="None">
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Backward" />
<telerik:RadPane ID="ReadingPanel" runat="server" Scrolling="Both" MinWidth="300"
ClientIDMode="Static">
</telerik:RadPane>
</telerik:RadSplitter>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
</form>
</body>
</html>