radAJAXLoadingPanel bigger than fixed height radDock

[Greg]

I have a radTreeList inside a radDock.  The radDock is fixed height and the radTreeList is larger than the fixed height so there is a vertical scroll bar on the radDock, which is what I want.  I also have an ajax manager to make the radTreeList use ajax with a loading panel.  The issue is when an item command event from the radTreeList is fired, the loading panel gets its attributes from the radTreeList and not the parent radDock to set the absolute height and width properties.  So what is displayed is a loading panel larger than the radDock (See attached image).  

I've tried a couple of different settings but have not been able to fix it.  I'm sure there is a simple solution but I have not been able to find one.  


ASPX Code

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"/>
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server">
        </telerik:RadSkinManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" EnableSkinTransparency="true" >
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="radTreeList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="radTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <telerik:RadDockZone runat="server" ID="RadDockZone1" Style="float: left; margin-right: 15px;" Width="310" BorderStyle="none">
                <telerik:RadDock runat="server" ID="dockSwitched" DefaultCommands="ExpandCollapse" EnableRoundedCorners="true" style="padding-bottom:10px;" height="200px" EnableDrag="false">
                    <ContentTemplate>
                        <telerik:RadTreeList ID="radTreeList1" runat="server" Width="275px" DataKeyNames="ID" ParentDataKeyNames="PID"  ShowOuterBorders="false" AutoGenerateColumns="false" AllowPaging="false" AllowSorting="true">
                            <Columns>
                                <telerik:TreeListBoundColumn DataField="Text" HeaderText="Text" SortExpression="Text"><HeaderStyle HorizontalAlign="Center" /><ItemStyle Wrap="false" /></telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn DataField="ID" HeaderText="ID" SortExpression="ID"><HeaderStyle HorizontalAlign="Center" /><ItemStyle Wrap="false" /></telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn DataField="PID" HeaderText="Parent" SortExpression="PID"><HeaderStyle HorizontalAlign="Center" /><ItemStyle Wrap="false" /></telerik:TreeListBoundColumn>
                            </Columns>
                        </telerik:RadTreeList>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>

VB Code

Partial Class Test
    Inherits System.Web.UI.Page

    Protected Sub radTreeList1_ItemCommand(sender As Object, e As Telerik.Web.UI.TreeListCommandEventArgs) Handles radTreeList1.ItemCommand
        System.Threading.Thread.Sleep(5000)
    End Sub

    Protected Sub radTreeList1_NeedDataSource(sender As Object, e As Telerik.Web.UI.TreeListNeedDataSourceEventArgs) Handles radTreeList1.NeedDataSource
        Dim list As New ArrayList()

        list.Add(New TestListItem(1, "Item 1", 2))
        list.Add(New TestListItem(2, "Item 2", Nothing))
        list.Add(New TestListItem(3, "Item 3", 2))
        list.Add(New TestListItem(4, "Item 4", 5))
        list.Add(New TestListItem(5, "Item 5", Nothing))
        list.Add(New TestListItem(6, "Item 6", 2))
        list.Add(New TestListItem(7, "Item 7", 5))
        list.Add(New TestListItem(8, "Item 8", 3))
        list.Add(New TestListItem(9, "Item 9", 3))
        list.Add(New TestListItem(10, "Item 10", 3))
        list.Add(New TestListItem(11, "Item 5", Nothing))
        list.Add(New TestListItem(12, "Item 5", Nothing))
        list.Add(New TestListItem(13, "Item 5", Nothing))
        list.Add(New TestListItem(14, "Item 5", Nothing))
        list.Add(New TestListItem(15, "Item 5", Nothing))
        list.Add(New TestListItem(16, "Item 5", Nothing))
        list.Add(New TestListItem(17, "Item 5", Nothing))
        list.Add(New TestListItem(18, "Item 5", Nothing))
        list.Add(New TestListItem(19, "Item 5", Nothing))
        list.Add(New TestListItem(20, "Item 10", 3))
        list.Add(New TestListItem(21, "Item 5", Nothing))
        list.Add(New TestListItem(22, "Item 5", Nothing))
        list.Add(New TestListItem(23, "Item 5", Nothing))
        list.Add(New TestListItem(24, "Item 5", Nothing))
        list.Add(New TestListItem(25, "Item 5", Nothing))
        list.Add(New TestListItem(26, "Item 5", Nothing))
        list.Add(New TestListItem(27, "Item 5", Nothing))
        list.Add(New TestListItem(28, "Item 5", Nothing))
        list.Add(New TestListItem(29, "Item 5", Nothing))

        radTreeList1.DataSource = list
    End Sub

    Public Class TestListItem
        Public Property ID() As System.Nullable(Of Integer)
            Get
                Return m_ID
            End Get
            Set(ByVal value As System.Nullable(Of Integer))
                m_ID = Value
            End Set
        End Property
        Private m_ID As System.Nullable(Of Integer)
        Public Property PID() As System.Nullable(Of Integer)
            Get
                Return m_PID
            End Get
            Set(ByVal value As System.Nullable(Of Integer))
                m_PID = Value
            End Set
        End Property
        Private m_PID As System.Nullable(Of Integer)
        Public Property Text() As String
            Get
                Return m_Text
            End Get
            Set(ByVal value As String)
                m_Text = Value
            End Set
        End Property
        Private m_Text As String
        Public Sub New(ByVal id__1 As System.Nullable(Of Integer), ByVal text__2 As String, ByVal pid__3 As System.Nullable(Of Integer))
            ID = id__1
            Text = text__2
            PID = pid__3
        End Sub
    End Class
End Class

Thanks,
Greg

[Slav]

Hello Greg,

You can wrap the RadTreeList control in a Panel that has a fixed height and overflow. When you change the updated control in the RadAjaxManager settings to this Panel, the RadAjaxLoadingPanel will be resized according to its height.

The following example demonstrates the described approach:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server">
</telerik:RadSkinManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" EnableSkinTransparency="true" Skin="Forest" Height="100px">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="radTreeList1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadDockLayout runat="server" ID="RadDockLayout1">
    <telerik:RadDockZone runat="server" ID="RadDockZone1" Style="float: left; margin-right: 15px;"
        Width="310" BorderStyle="none">
        <telerik:RadDock runat="server" ID="dockSwitched" DefaultCommands="ExpandCollapse"
            EnableRoundedCorners="true" Style="padding-bottom: 10px;" Height="200px" EnableDrag="false">
            <ContentTemplate>
                <asp:Panel runat="server" ID="Panel1" Height="165px" style="overflow: auto;">
                <telerik:RadTreeList ID="radTreeList1" runat="server" Width="275px" DataKeyNames="ID"
                    ParentDataKeyNames="PID" ShowOuterBorders="false" AutoGenerateColumns="false"
                    AllowPaging="false" AllowSorting="true">
                    <Columns>
                        <telerik:TreeListBoundColumn DataField="Text" HeaderText="Text" SortExpression="Text">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle Wrap="false" />
                        </telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="ID" HeaderText="ID" SortExpression="ID">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle Wrap="false" />
                        </telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="PID" HeaderText="Parent" SortExpression="PID">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle Wrap="false" />
                        </telerik:TreeListBoundColumn>
                    </Columns>
                </telerik:RadTreeList>
                </asp:Panel>
            </ContentTemplate>
        </telerik:RadDock>
    </telerik:RadDockZone>
</telerik:RadDockLayout>

All the best,
Slav
the Telerik team