radAJAXLoadingPanel bigger than fixed height radDock

2 posts, 0 answers
  1. Greg
    Greg avatar
    9 posts
    Member since:
    Apr 2011

    Posted 24 May 2012 Link to this post

    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
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 29 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top