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>
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>
2 Answers, 1 is accepted
0
mirang
Top achievements
Rank 1
Rank 1
answered on 27 Jan 2012, 05:55 PM
Any updates on this. The entire above code can be pasted as it is inside any aspx page and the issue will be reproduced.
0
Hello, Mirang.
This appears to be a bug and unfortunately can not be fixed easily. I have logged this in our public issue tracking system.
In addition, I have awarded you some Telerik points for your involvement with the Telerik controls.
Greetings,
Ivan Zhekov
the Telerik team
This appears to be a bug and unfortunately can not be fixed easily. I have logged this in our public issue tracking system.
In addition, I have awarded you some Telerik points for your involvement with the Telerik controls.
Greetings,
Ivan Zhekov
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>