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

radAJAXLoadingPanel bigger than fixed height radDock

1 Answer 55 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 24 May 2012, 09:52 PM
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

1 Answer, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 29 May 2012, 12:29 PM
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
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.
Tags
Dock
Asked by
Greg
Top achievements
Rank 1
Answers by
Slav
Telerik team
Share this question
or