<tr style="vertical-align:middle; width:100%">
<td style="vertical-align:middle; width:100%">
<telerik:RadSplitter ID="trsCWCMPrimary" runat="server" BorderWidth="0" BorderSize="0" BorderStyle="None" Height="520px" LiveResize="true" Orientation="Vertical" ResizeMode="Proportional" Width="100%">
<telerik:RadPane ID="trpCWCMPrimaryTree" runat="server" Collapsed="false" Width="20%">
<telerik:RadTreeView ID="trtvCWCMPrimary" runat="server" CssClass="sfecua_chkrdo_dataLeftSmall" Height="99%" Width="100%" OnNodeClick="trtvCWCMPrimary_NodeClick" OnNodeCollapse="trtvCWCMPrimary_NodeCollapse" OnNodeExpand="trtvCWCMPrimary_NodeExpand" onclientnodeclicking="OnClientNodeClicking">
</telerik:RadTreeView>
</telerik:RadPane>
<telerik:RadSplitBar ID="trsbPrimarySecondary" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>
<telerik:RadPane ID="trpCWCMSecondaryTableDetails" runat="server">
<div id="divCustomerMgmt" style="display:block; border:none;">
<iframe runat="server" src="./../CustWaitLoading.aspx" id="ifrmCWCMCustCustomerMgmt" name="ifrmCWCMCustCustomerMgmt" width="100%" height="100%" marginwidth="0" frameborder="0" scrolling="no">Customer Mgmt IFRAME</iframe>
</div>
<div id="divAccountMgmt" style="display:none; border:none;">
<iframe runat="server" src="./../CustWaitLoading.aspx" id="ifrmCWCMCustAccountMgmt" name="ifrmCWCMCustAccountMgmt" width="100%" height="100%" marginwidth="0" frameborder="0" scrolling="no">Account Mgmt IFRAME</iframe>
</div>
<div id="divBillingMgmt" style="display:none; border:none;">
<iframe runat="server" src="./../CustWaitLoading.aspx" id="ifrmCWCMCustBillingMgmt" name="ifrmCWCMCustBillingMgmt" width="100%" height="100%" marginwidth="0" frameborder="0" scrolling="no">Billing Mgmt IFRAME</iframe>
</div>
</telerik:RadPane>
</telerik:RadSplitter>
</td>
</tr>
No longer reacts as expected.
Previously, the RadTreeView in the left RadPane would be cut off (scroll bars appear) as the RadSplitBar was moved left. The rendered controls (IFrames, etc) in the right RadPane would shrink as the RadSplitBar was moved right. The behaviour I want.
NOW, the RadTreeView nodes, text bleeds over the RadSplitBar when initially rendered and when the RadSplitBar is moved left. It's as though the right RadPane is sliding under the left RadPane. The RadTreeView is visible superimposed over the contents of the right RadPane.
I have to revert to version 2012.3.1016.40.
15 Answers, 1 is accepted
We are not aware of such behavior of RadSplitter. Unfortunately, the provided information is not enough to determine the exact cause of the issue. Could you please provide more detailed information on the specific scenario?
Could you prepare and send a simple fully runnable project reproducing the problem so we can investigate it further? For you convenience I am attaching my test page - as an alternative could you modify it to a point, where the problem occurs and send it back?
Regards,
Vesi
the Telerik team
We're experiencing this same issue. I am able to reproduce the behavior by changing your sample to include a string in the TreeView control that will bleed over to the over pane (e.g. change one of the "a" entries to something like "a really long string that will bleed over the splitter bar...").
I have noticed that this issue is isolated to IE and appears to be related to the document mode (it appears to work in Quirks mode). I was able to get the behavior to appear by using the developer tools and setting the document mode to IE 7 Standards. Unfortunately for me, we still have users using older browsers and are experiencing this with some clients.
HTH,
Tom
Thank you for narrowing us on reproducing the issue. After a further investigation it turn out that this is a browser behavior caused by a broken box-model in IE7. In order to workaround it you have to set a "position: relative" style to the RadPAne, which is holding the TreeView:
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
Height
=
"520px"
Orientation
=
"Vertical"
Width
=
"100%"
>
<
telerik:RadPane
ID
=
"RadPane1"
runat
=
"server"
Width
=
"20%"
CssClass
=
"PanePosition"
Scrolling
=
"Both"
>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
>
</
telerik:RadTreeView
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"RadSplitbar1"
runat
=
"server"
>
</
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"RadPane2"
runat
=
"server"
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
<style type=
"text/css"
>
.PanePosition
{
position
:
relative
;
}
</style>
Kind regards,
Vesi
the Telerik team
I have the same issue with the RadTreeList. Why doesn't this work as expected, like RadGrid for example?
The workaround is fine, but when you use this solution the column headers are scolled to. Setting the panel to scroll=no and the RadTreeList to height/width=100% with ClientSettings-Scrolling AllowScroll=true schould also work, is it not?
Erik
I have tried to reproduce the described issue with a TreeList, but to no avail. Could you provide more detailed information on the specific scenario? What is the exact layout you want to achieve? A sample fully runnable project demonstrating the case will be of a great help in solving the case.
Kind regards,
Vesi
the Telerik team
What i want is the same behaviour as RadGrid has. So a page with splitter on it and in it a full sized RadTreeList thats has it's own scrolling, showing paging on the bottom. Also columns are filled out and the scrollbar is not painted correctly (standard iso skin).
see the image attached for an example what i'm getting.
ASPX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
>Test RadSplitter RadTreeList</
title
>
<
style
type
=
"text/css"
>
html, body, form /* Required to have full-screen RadSplitter */
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
telerik:RadSplitter
ID
=
"RadSplitter_Module"
BorderSize
=
"0"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"Horizontal"
VisibleDuringInit
=
"false"
LiveResize
=
"False"
runat
=
"Server"
>
<
telerik:RadPane
ID
=
"RadPane_Main"
Width
=
"100%"
Height
=
"100%"
Scrolling
=
"None"
runat
=
"server"
>
<
telerik:RadTreeList
ID
=
"RadTreeList1"
DataKeyNames
=
"ContactId"
Width
=
"100%"
Height
=
"100%"
ParentDataKeyNames
=
"ParentContactId"
AllowPaging
=
"true"
PageSize
=
"10"
AutoGenerateColumns
=
"false"
ShowTreeLines
=
"false"
AllowSorting
=
"True"
GridLines
=
"Vertical"
runat
=
"server"
>
<
Columns
>
<
telerik:TreeListBoundColumn
DataField
=
"Name"
UniqueName
=
"Name"
HeaderText
=
"Naam"
HeaderStyle-Width
=
"120px"
/>
<
telerik:TreeListBoundColumn
DataField
=
"FirstName"
UniqueName
=
"FirstName"
HeaderText
=
"FirstName"
HeaderStyle-Width
=
"120px"
/>
<
telerik:TreeListBoundColumn
DataField
=
"City"
UniqueName
=
"City"
HeaderText
=
"City"
HeaderStyle-Width
=
"120px"
/>
<
telerik:TreeListBoundColumn
DataField
=
"Country"
UniqueName
=
"Country"
HeaderText
=
"Country"
HeaderStyle-Width
=
"120px"
/>
<
telerik:TreeListBoundColumn
DataField
=
"ContactId"
UniqueName
=
"Id"
HeaderText
=
"Id"
HeaderStyle-Width
=
"40px"
HeaderStyle-HorizontalAlign
=
"Right"
HeaderStyle-ForeColor
=
"GrayText"
ItemStyle-HorizontalAlign
=
"Right"
ItemStyle-ForeColor
=
"GrayText"
ItemStyle-Font-Size
=
"Smaller"
/>
</
Columns
>
<
ClientSettings
AllowPostBackOnItemClick
=
"true"
>
<
Selecting
AllowItemSelection
=
"true"
/>
<
Resizing
AllowColumnResize
=
"true"
/>
<
Scrolling
AllowScroll
=
"true"
UseStaticHeaders
=
"true"
/>
</
ClientSettings
>
</
telerik:RadTreeList
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
form
>
</
body
>
</
html
>
VB (page content)
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
End
Sub
Private
Sub
RadTreeList_Main_NeedDataSource(sender
As
Object
, e
As
Telerik.Web.UI.TreeListNeedDataSourceEventArgs)
Handles
RadTreeList1.NeedDataSource
Dim
Lst = TestItem.GetTestData
CType
(sender, Telerik.Web.UI.RadTreeList).DataSource = Lst
End
Sub
Private
Sub
Page_PreRender(sender
As
Object
, e
As
System.EventArgs)
Handles
Me
.PreRender
RadTreeList1.ExpandAllItems()
End
Sub
Private
Class
TestItem
Private
mlng_ContactId
As
Long
Private
mstr_Name
As
String
Private
mstr_FirstName
As
String
Private
mstr_City
As
String
Private
mstr_Country
As
String
Private
mobj_ParentContactId
As
Long
? =
Nothing
Public
Sub
New
()
End
Sub
Public
Sub
New
(
ByVal
alng_ContactId
As
Long
,
ByVal
astr_Name
As
String
,
ByVal
astr_FirstName
As
String
,
ByVal
astr_City
As
String
,
ByVal
astr_Country
As
String
,
Optional
ByVal
alng_ParentContactId
As
Long
? =
Nothing
)
ContactId = alng_ContactId
Name = astr_Name
FirstName = astr_FirstName
City = astr_City
Country = astr_Country
ParentContactId = alng_ParentContactId
End
Sub
Public
Shared
Function
GetTestData()
As
List(Of TestItem)
Dim
lst
As
New
List(Of TestItem)
lst.Add(
New
TestItem(1,
"Name #01"
,
"Firstname #01"
,
"City #01"
,
"Country #01"
))
lst.Add(
New
TestItem(2,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(3,
"Name #02.1"
,
"Firstname #02.1"
,
"City #02.1"
,
"Country #02.1"
, 2))
lst.Add(
New
TestItem(4,
"Name #02.2"
,
"Firstname #02.2"
,
"City #02.2"
,
"Country #02.2"
, 2))
lst.Add(
New
TestItem(5,
"Name #02.2.1"
,
"Firstname #02.2.1"
,
"City #02.2.1"
,
"Country #02.2.1"
, 4))
lst.Add(
New
TestItem(6,
"Name #02.2.2"
,
"Firstname #02.2.2"
,
"City #02.2.2"
,
"Country #02.2.2"
, 4))
lst.Add(
New
TestItem(7,
"Name #02.3"
,
"Firstname #02.3"
,
"City #02.3"
,
"Country #02.3"
, 2))
lst.Add(
New
TestItem(8,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(9,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(10,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(11,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(12,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(13,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(14,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(15,
"Name #01"
,
"Firstname #01"
,
"City #01"
,
"Country #01"
))
lst.Add(
New
TestItem(16,
"Name #16"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(17,
"Name #16.1"
,
"Firstname #16.1"
,
"City #02.1"
,
"Country #02.1"
, 16))
lst.Add(
New
TestItem(18,
"Name #16.2"
,
"Firstname #16.2"
,
"City #02.2"
,
"Country #02.2"
, 16))
lst.Add(
New
TestItem(19,
"Name #16.2.1"
,
"Firstname #16.2.1"
,
"City #02.2.1"
,
"Country #02.2.1"
, 18))
lst.Add(
New
TestItem(20,
"Name #16.2.2"
,
"Firstname #16.2.2"
,
"City #02.2.2"
,
"Country #02.2.2"
, 18))
lst.Add(
New
TestItem(21,
"Name #16.3"
,
"Firstname #16.3"
,
"City #02.3"
,
"Country #02.3"
, 16))
lst.Add(
New
TestItem(22,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
Return
lst
End
Function
Public
Property
ContactId
As
Long
Get
Return
mlng_ContactId
End
Get
Set
(
ByVal
value
As
Long
)
mlng_ContactId = value
End
Set
End
Property
Public
Property
Name
As
String
Get
Return
mstr_Name
End
Get
Set
(
ByVal
value
As
String
)
mstr_Name = value
End
Set
End
Property
Public
Property
FirstName
As
String
Get
Return
mstr_FirstName
End
Get
Set
(
ByVal
value
As
String
)
mstr_FirstName = value
End
Set
End
Property
Public
Property
City
As
String
Get
Return
mstr_City
End
Get
Set
(
ByVal
value
As
String
)
mstr_City = value
End
Set
End
Property
Public
Property
Country
As
String
Get
Return
mstr_Country
End
Get
Set
(
ByVal
value
As
String
)
mstr_Country = value
End
Set
End
Property
Public
Property
ParentContactId
As
Long
?
Get
Return
mobj_ParentContactId
End
Get
Set
(
ByVal
value
As
Long
?)
mobj_ParentContactId = value
End
Set
End
Property
End
Class
In order to make the TreeList reside according to its parent RadPane size, its ScrollHeight property should be also configured. The limitation here is that this property supports only values in pixels, so I would suggest you to use the following approach to make the calculations:
- Assign handlers to the Splitter's OnClientLoad and OnClientResized events:
<
telerik:RadSplitter
ID
=
"RadSplitter_Module"
BorderSize
=
"0"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
OnClientLoad
=
"ResizeTreeList"
OnClientResized
=
"ResizeTreeList"
...>
- Calculate the current height of the RadPane_Main, excluding the header's and footer's height of the TreeList and set it as a value to the TreeList data container:
function
ResizeTreeList(splitter, args) {
var
pane = $find(
"RadPane_Main"
);
var
height = pane.get_height();
var
trlData = $get(
"RadTreeList1"
+
"_rtlData"
);
var
trlHeaderHeight = $get(
"RadTreeList1"
+
"_rtlHeader"
).scrollHeight;
var
trlFooterHeight = $get(
"RadTreeList1"
+
"_rtlFooter"
).scrollHeight;
trlData.style.height = (height - trlHeaderHeight - trlFooterHeight) +
"px"
;
}
For convenience I am attaching the modified project, so you could inspect it on your side.
Kind regards,
Veselina Raykova
the Telerik team
It is a mistery to me why this is not working out-of-the-box, integration radSplitter with radTreeList/radTreeView?
Erik
My solution for the other people:
<
telerik:RadScriptBlock
runat
=
"server"
ID
=
"RadScriptBlock1"
>
<
script
type
=
"text/javascript"
>
//
<![CDATA[
function RadSplitter_Module_ResizeTreeList(splitter, args) {
try {
var RadPane_Main = $find("<%= RadPane_Main.ClientID %>");
var height = RadPane_Main.get_height();
//var RadTreeList_Main = $find("<%= RadTreeList_Main.ClientID %>");
var trlData = $get("<%= RadTreeList_Main.ClientID %>" + "_rtlData");
var trlHeader = $get("<%= RadTreeList_Main.ClientID %>" + "_rtlHeader");
var trlFooter = $get("<%= RadTreeList_Main.ClientID %>" + "_rtlFooter");
var trlHeaderHeight = trlHeader.scrollHeight;
var trlFooterHeight = trlFooter.scrollHeight;
trlData.style.height = (height - trlHeaderHeight - trlFooterHeight) + "px";
}
catch (ex) {
alert("JS Error #1304121433:" + ex);
}
}
// ]]>
</
script
>
</
telerik:RadScriptBlock
>
<
telerik:RadSplitter
ID
=
"RadSplitter_Module"
BorderSize
=
"0"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"Horizontal"
VisibleDuringInit
=
"false"
LiveResize
=
"False"
OnClientLoaded
=
"RadSplitter_Module_ResizeTreeList"
OnClientResized
=
"RadSplitter_Module_ResizeTreeList"
runat
=
"Server"
>
<
telerik:RadPane
ID
=
"RadPane_Top"
Height
=
"70px"
Scrolling
=
"None"
runat
=
"server"
>
<
telerik:RadButton
ID
=
"rbt_Open"
Text
=
"Open "
ButtonType
=
"StandardButton"
Font-Bold
=
"true"
Icon-PrimaryIconCssClass
=
"rbOpen"
Icon-PrimaryIconTop
=
"6px"
runat
=
"server"
/>
<
asp:TextBox
ID
=
"TextBox1"
Text
=
"erik"
runat
=
"server"
></
asp:TextBox
>
<
telerik:RadButton
ID
=
"RadButton1"
Text
=
"Open "
ButtonType
=
"StandardButton"
Font-Bold
=
"true"
Icon-PrimaryIconCssClass
=
"rbOpen"
Icon-PrimaryIconTop
=
"6px"
runat
=
"server"
/>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPane_Main"
Height
=
"100%"
Scrolling
=
"None"
runat
=
"server"
>
<
telerik:RadTreeList
ID
=
"RadTreeList_Main"
ClientDataKeyNames
=
"ContactId"
DataKeyNames
=
"ContactId"
ParentDataKeyNames
=
"ParentContactId"
Width
=
"100%"
Height
=
"100%"
AllowPaging
=
"True"
PageSize
=
"4"
AutoGenerateColumns
=
"false"
ShowTreeLines
=
"false"
AllowSorting
=
"True"
GridLines
=
"Vertical"
runat
=
"server"
ItemStyle-Wrap
=
"False"
PagerStyle-AlwaysVisible
=
"True"
ShowFooter
=
"False"
>
<
Columns
>
<
telerik:TreeListBoundColumn
DataField
=
"FullNameLMF"
UniqueName
=
"FullNameLMF"
HeaderText
=
"Full Name"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"Name"
UniqueName
=
"Name"
HeaderText
=
"Name"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"FirstName"
UniqueName
=
"FirstName"
HeaderText
=
"First Name"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"TypeId"
UniqueName
=
"TypeId"
HeaderText
=
"Type"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"ContactId"
UniqueName
=
"Id"
HeaderText
=
"Id"
HeaderStyle-Width
=
"40px"
HeaderStyle-HorizontalAlign
=
"Right"
HeaderStyle-ForeColor
=
"GrayText"
ItemStyle-HorizontalAlign
=
"Right"
ItemStyle-ForeColor
=
"GrayText"
ItemStyle-Font-Size
=
"Smaller"
/>
</
Columns
>
<
ClientSettings
AllowPostBackOnItemClick
=
"false"
>
<
ClientEvents
OnItemDblClick
=
"prvOnRadTreeList_Main_RowDblClick"
/>
<
Scrolling
AllowScroll
=
"true"
SaveScrollPosition
=
"true"
UseStaticHeaders
=
"true"
/>
<
Selecting
AllowItemSelection
=
"true"
/>
<
Resizing
AllowColumnResize
=
"true"
/>
</
ClientSettings
>
</
telerik:RadTreeList
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
When i use this code, the paging is not working... Pressing page 2 postsback to page 1...
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default2.aspx.vb" Inherits="WebApplication14.Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
html, body, form /* Required to have full-screen RadSplitter */
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel_App"
runat
=
"server"
LoadingPanelID
=
"RadAjaxLoadingPanel_App"
Style
=
"width: 100%; height: 100%;"
class
=
"FullScreen"
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel_App"
runat
=
"server"
/>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator_App"
runat
=
"server"
/>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
//
<![CDATA[
function prvOnRadTreeList_Main_RowDblClick(sender, eventArgs) {
try {
//alert("RowDblClicked:" + eventArgs.get_item().get_dataKeyValue("ContactId"));
//__doPostBack("<%= RadTreeList_Main.UniqueID %>", eventArgs.get_item().get_dataKeyValue("ContactId"));
sender.fireCommand("ItemDblClick", eventArgs.get_item().get_displayIndex());
}
catch (ex) {
alert("JS Error #1304121432:" + ex);
}
}
function RadSplitter_Module_ResizeTreeList(splitter, args) {
try {
var RadPane_Main = $find("<%= RadPane_Main.ClientID %>");
var height = RadPane_Main.get_height();
//var RadTreeList_Main = $find("<%= RadTreeList_Main.ClientID %>");
var trlData = $get("<%= RadTreeList_Main.ClientID %>" + "_rtlData");
var trlHeader = $get("<%= RadTreeList_Main.ClientID %>" + "_rtlHeader");
var trlFooter = $get("<%= RadTreeList_Main.ClientID %>" + "_rtlFooter");
var trlHeaderHeight = trlHeader.scrollHeight;
var trlFooterHeight = trlFooter.scrollHeight;
trlData.style.height = (height - trlHeaderHeight - trlFooterHeight) + "px";
}
catch (ex) {
alert("JS Error #1304121433:" + ex);
}
}
// ]]>
</
script
>
</
telerik:RadScriptBlock
>
<
telerik:RadSplitter
ID
=
"RadSplitter_Module"
BorderSize
=
"0"
BorderStyle
=
"None"
PanesBorderSize
=
"0"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"Horizontal"
VisibleDuringInit
=
"false"
LiveResize
=
"False"
OnClientLoaded
=
"RadSplitter_Module_ResizeTreeList"
OnClientResized
=
"RadSplitter_Module_ResizeTreeList"
runat
=
"Server"
>
<
telerik:RadPane
ID
=
"RadPane_Top"
Height
=
"70px"
Scrolling
=
"None"
runat
=
"server"
>
<
telerik:RadButton
ID
=
"rbt_Open"
Text
=
"Open "
ButtonType
=
"StandardButton"
Font-Bold
=
"true"
Icon-PrimaryIconCssClass
=
"rbOpen"
Icon-PrimaryIconTop
=
"6px"
runat
=
"server"
/>
<
asp:TextBox
ID
=
"TextBox1"
Text
=
"erik"
runat
=
"server"
></
asp:TextBox
>
<
telerik:RadButton
ID
=
"RadButton1"
Text
=
"Open "
ButtonType
=
"StandardButton"
Font-Bold
=
"true"
Icon-PrimaryIconCssClass
=
"rbOpen"
Icon-PrimaryIconTop
=
"6px"
runat
=
"server"
/>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPane_Main"
Height
=
"100%"
Scrolling
=
"None"
runat
=
"server"
>
<
telerik:RadTreeList
ID
=
"RadTreeList_Main"
ClientDataKeyNames
=
"ContactId"
DataKeyNames
=
"ContactId"
ParentDataKeyNames
=
"ParentContactId"
Width
=
"100%"
Height
=
"100%"
AllowPaging
=
"True"
PageSize
=
"4"
AutoGenerateColumns
=
"false"
ShowTreeLines
=
"false"
AllowSorting
=
"True"
GridLines
=
"Vertical"
runat
=
"server"
ItemStyle-Wrap
=
"False"
PagerStyle-AlwaysVisible
=
"True"
ShowFooter
=
"False"
>
<
Columns
>
<
telerik:TreeListBoundColumn
DataField
=
"Name"
UniqueName
=
"Name"
HeaderText
=
"Name"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"FirstName"
UniqueName
=
"FirstName"
HeaderText
=
"First Name"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"City"
UniqueName
=
"City"
HeaderText
=
"City"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"Country"
UniqueName
=
"Country"
HeaderText
=
"Country"
ItemStyle-Wrap
=
"false"
/>
<
telerik:TreeListBoundColumn
DataField
=
"ContactId"
UniqueName
=
"Id"
HeaderText
=
"Id"
HeaderStyle-Width
=
"40px"
HeaderStyle-HorizontalAlign
=
"Right"
HeaderStyle-ForeColor
=
"GrayText"
ItemStyle-HorizontalAlign
=
"Right"
ItemStyle-ForeColor
=
"GrayText"
ItemStyle-Font-Size
=
"Smaller"
/>
</
Columns
>
<
ClientSettings
AllowPostBackOnItemClick
=
"false"
>
<
ClientEvents
OnItemDblClick
=
"prvOnRadTreeList_Main_RowDblClick"
/>
<
Scrolling
AllowScroll
=
"true"
SaveScrollPosition
=
"true"
UseStaticHeaders
=
"true"
/>
<
Selecting
AllowItemSelection
=
"true"
/>
<
Resizing
AllowColumnResize
=
"true"
/>
</
ClientSettings
>
</
telerik:RadTreeList
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadAjaxPanel
>
</
form
>
</
body
>
</
html
>
Public
Class
Default2
Inherits
System.Web.UI.Page
Private
Sub
RadTreeList_Main_NeedDataSource(sender
As
Object
, e
As
Telerik.Web.UI.TreeListNeedDataSourceEventArgs)
Handles
RadTreeList_Main.NeedDataSource
Dim
Lst = TestItem.GetTestData
CType
(sender, Telerik.Web.UI.RadTreeList).DataSource = Lst
End
Sub
Private
Sub
Page_PreRender(sender
As
Object
, e
As
System.EventArgs)
Handles
Me
.PreRender
RadTreeList_Main.ExpandAllItems()
End
Sub
Private
Class
TestItem
Private
mlng_ContactId
As
Long
Private
mstr_Name
As
String
Private
mstr_FirstName
As
String
Private
mstr_City
As
String
Private
mstr_Country
As
String
Private
mobj_ParentContactId
As
Long
? =
Nothing
Public
Sub
New
()
End
Sub
Public
Sub
New
(
ByVal
alng_ContactId
As
Long
,
ByVal
astr_Name
As
String
,
ByVal
astr_FirstName
As
String
,
ByVal
astr_City
As
String
,
ByVal
astr_Country
As
String
,
Optional
ByVal
alng_ParentContactId
As
Long
? =
Nothing
)
ContactId = alng_ContactId
Name = astr_Name
FirstName = astr_FirstName
City = astr_City
Country = astr_Country
ParentContactId = alng_ParentContactId
End
Sub
Public
Shared
Function
GetTestData()
As
List(Of TestItem)
Dim
lst
As
New
List(Of TestItem)
lst.Add(
New
TestItem(1,
"Name #01"
,
"Firstname #01"
,
"City #01"
,
"Country #01"
))
lst.Add(
New
TestItem(2,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(3,
"Name #02.1"
,
"Firstname #02.1"
,
"City #02.1"
,
"Country #02.1"
, 2))
lst.Add(
New
TestItem(4,
"Name #02.2"
,
"Firstname #02.2"
,
"City #02.2"
,
"Country #02.2"
, 2))
lst.Add(
New
TestItem(5,
"Name #02.2.1"
,
"Firstname #02.2.1"
,
"City #02.2.1"
,
"Country #02.2.1"
, 4))
lst.Add(
New
TestItem(6,
"Name #02.2.2"
,
"Firstname #02.2.2"
,
"City #02.2.2"
,
"Country #02.2.2"
, 4))
lst.Add(
New
TestItem(7,
"Name #02.3"
,
"Firstname #02.3"
,
"City #02.3"
,
"Country #02.3"
, 2))
lst.Add(
New
TestItem(8,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(9,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(10,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(11,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(12,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(13,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(14,
"Name #02"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(15,
"Name #01"
,
"Firstname #01"
,
"City #01"
,
"Country #01"
))
lst.Add(
New
TestItem(16,
"Name #16"
,
"Firstname #02"
,
"City #02"
,
"Country #02"
))
lst.Add(
New
TestItem(17,
"Name #16.1"
,
"Firstname #16.1"
,
"City #02.1"
,
"Country #02.1"
, 16))
lst.Add(
New
TestItem(18,
"Name #16.2"
,
"Firstname #16.2"
,
"City #02.2"
,
"Country #02.2"
, 16))
lst.Add(
New
TestItem(19,
"Name #16.2.1"
,
"Firstname #16.2.1"
,
"City #02.2.1"
,
"Country #02.2.1"
, 18))
lst.Add(
New
TestItem(20,
"Name #16.2.2"
,
"Firstname #16.2.2"
,
"City #02.2.2"
,
"Country #02.2.2"
, 18))
lst.Add(
New
TestItem(21,
"Name #16.3"
,
"Firstname #16.3"
,
"City #02.3"
,
"Country #02.3"
, 16))
lst.Add(
New
TestItem(22,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(23,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(24,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(25,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(26,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(27,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(28,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(29,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(30,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(31,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(32,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
lst.Add(
New
TestItem(33,
"Name #22"
,
"Firstname #22"
,
"City #22"
,
"Country #22"
))
Return
lst
End
Function
Public
Property
ContactId
As
Long
Get
Return
mlng_ContactId
End
Get
Set
(
ByVal
value
As
Long
)
mlng_ContactId = value
End
Set
End
Property
Public
Property
Name
As
String
Get
Return
mstr_Name
End
Get
Set
(
ByVal
value
As
String
)
mstr_Name = value
End
Set
End
Property
Public
Property
FirstName
As
String
Get
Return
mstr_FirstName
End
Get
Set
(
ByVal
value
As
String
)
mstr_FirstName = value
End
Set
End
Property
Public
Property
City
As
String
Get
Return
mstr_City
End
Get
Set
(
ByVal
value
As
String
)
mstr_City = value
End
Set
End
Property
Public
Property
Country
As
String
Get
Return
mstr_Country
End
Get
Set
(
ByVal
value
As
String
)
mstr_Country = value
End
Set
End
Property
Public
Property
ParentContactId
As
Long
?
Get
Return
mobj_ParentContactId
End
Get
Set
(
ByVal
value
As
Long
?)
mobj_ParentContactId = value
End
Set
End
Property
End
Class
End
Class
The reason for the experienced behavior is that the the TreeList's ExpandAllItems() should be called in earlier moment, than the Page_PreRender. Moving it to the Page_Load event fixed the issue on my side:
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
RadTreeList1.ExpandAllItems()
End
Sub
Private
Sub
Page_PreRender(sender
As
Object
, e
As
System.EventArgs)
Handles
Me
.PreRender
'RadTreeList1.ExpandAllItems()
End
Sub
Please, give it a try and let me know how it goes.
Kind regards,
Veselina Raykova
the Telerik team
In the load, the problem persists, when using the the Page_Init, it works welll... How early should we do it?? ;-) It's not verry helpfull in the init...
Erik
A second problem now: paging is working with the ExpandAllItems in the init,
But when I go to the last page and then 1 page back (prev) there is an error.
It is starting to cost me al lot, these Telerik bugs. I'm spending hours to get it all to work and create examples of your bugs, post them and create support tickets! I was using support tickets, but I now feel the need to publish those bugs.
come on! Hopping from bug to bug here!
Erik
Exception:
Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index
at Telerik.Web.UI.TreeListDataItem.GetDataKeyValue(String keyName)
at Telerik.Web.UI.RadTreeList.DescribeItemData(TreeListDataItem item)
at Telerik.Web.UI.RadTreeList.DescribeClientData()
at Telerik.Web.UI.RadTreeList.DescribeProperties(IScriptDescriptor descriptor)
at Telerik.Web.UI.ScriptRegistrar.GetScriptDescriptors(Control control)
at Telerik.Web.UI.RadCompositeDataBoundControl.GetScriptDescriptors()
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetChildScriptDescriptorsRecursive(Control parent, ArrayList scriptDescriptors)
at Telerik.Web.UI.ProxyScriptControl.GetScriptDescriptors()
at System.Web.UI.ScriptControlManager.RegisterScriptDescriptors(IScriptControl scriptControl)
at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
at System.Web.UI.UpdatePanel.RenderChildren(HtmlTextWriter writer)
at System.Web.UI.UpdatePanel.Render(HtmlTextWriter writer)
at Telerik.Web.UI.OurUpdatePanel.Render(HtmlTextWriter writer)
at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
at System.Web.UI.PageRequestManager.RenderFormCallback(HtmlTextWriter writer, Control containerControl)
at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
at System.Web.UI.HtmlControls.HtmlForm.RenderChildren(HtmlTextWriter writer)
at System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer)
at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
at System.Web.UI.HtmlFormWrapper.System.Web.UI.IHtmlForm.RenderControl(HtmlTextWriter writer)
at System.Web.UI.PageRequestManager.RenderPageCallback(HtmlTextWriter writer, Control pageControl)
at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
at System.Web.UI.Page.Render(HtmlTextWriter writer)
at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
at Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page)
at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
at System.Web.UI.Page.Render(HtmlTextWriter writer)
at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
at Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page)
at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
at System.Web.UI.Page.Render(HtmlTextWriter writer)
at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
I have successfully replicated the problem and notified our dev team in order to investigate and resolve the issue. Note that currently the problem could not be workaround. Sorry for any inconvenience caused.
All the best,
Antonio Stoilkov
the Telerik team
http://www.telerik.com/forums/treeview-in-radpane-in-radsplitter-issue?actionMode=replyPost&postId=fcfe914a-ea77-4b82-81b6-19a7a242440b#0-JB3zlEmkqMhEUHvaMU7g