This is a migrated thread and some comments may be shown as answers.

TreeView in RadPane in RadSplitter Issue

15 Answers 257 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

KK60 asked on 04 Jan 2013, 06:31 PM

After upgrading to version 2012.3.1205.40, the following code:

<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>

</div>

</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

answered on 07 Jan 2013, 10:00 AM

Splitter.zip

Hi Carmen,

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 12 Jan 2013, 11:42 PM

Hi Vesi,

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

answered on 17 Jan 2013, 06:33 AM

Hello,

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

answered on 06 Apr 2013, 08:00 PM

TreelistSplitter.png

Hello Vesi,

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: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

answered on 10 Apr 2013, 05:39 PM

TreeListInsidePane-VB-aspx.zip

Hi Erik,

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

answered on 12 Apr 2013, 02:52 PM

Thank you Veselina,

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" />

</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>

answered on 12 Apr 2013, 03:34 PM

Hi,

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: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">

<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" />

</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()