Expanded property has no effect when using HeaderTemplate

4 posts, 0 answers
  1. Dan Lehmann
    Dan Lehmann avatar
    103 posts
    Member since:
    May 2011

    Posted 17 Nov 2011 Link to this post

    I have added a checkbox to some of my RadPanelItems using the HeaderTemplate and css. If I set the property Expanded="true" on an Item it doesn't expand. It also doesn't expand if I set the property in my codebehind with for example:
    RadPanelBar1.Items(1).Expanded = True

    Here is my aspx:
    <style type="text/css">
         .rpItem .customHeaderItem:hover{
            background-position: 0 -200px !important;
            cursor: pointer;
        }
        .rpFirst .customHeaderItem:hover{
            background-position: 0 -201px !important;
            cursor: pointer;
        }
        .ItemCheckbox{
            float: right;
            padding-right: 10px;
        }
        label{
            font-style:normal;
            font-weight:normal;
        }
    </style>
      
    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%" Skin="Default" ExpandMode="MultipleExpandedItems">
        <Items>
      
            <telerik:RadPanelItem CssClass="customHeaderItem" Expanded="true">
                <HeaderTemplate>
                    <span class="rpOut">
                        <span class="rpExpandHandle"></span>
                        <asp:CheckBox runat="server" ID="chkIncludeItem1" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                        <span class="rpText">Panel Item 1</span>
                    </span>
                </HeaderTemplate>
                <ContentTemplate>
                    <p>Content....</p>
                </ContentTemplate>
            </telerik:RadPanelItem>
      
            <telerik:RadPanelItem CssClass="customHeaderItem">
                <HeaderTemplate>
                    <span class="rpOut">
                               <span class="rpExpandHandle"></span>
                        <asp:CheckBox runat="server" ID="chkIncludeItem2" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                        <span class="rpText">Panel Item 2</span>
                          </span>
                </HeaderTemplate>
                <ContentTemplate>
                    <p>Content....</p>
                </ContentTemplate>
            </telerik:RadPanelItem>
      
        </Items>
    </telerik:RadPanelBar>

    Without a HeaderTemplate it works as expected:
    <telerik:RadPanelBar runat="server" ID="RadPanelBar2" Width="50%" SkinID="Default" ExpandMode="MultipleExpandedItems">
        <Items>
            <telerik:RadPanelItem Text="Item 1" Expanded="true">
                <ContentTemplate>
                    <p>Content...</p>
                </ContentTemplate>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Item 2">
                <ContentTemplate>
                    <p>Content...</p>
                </ContentTemplate>
            </telerik:RadPanelItem>
        </Items>
         
    </telerik:RadPanelBar>

    What am I doing wrong?

    Thanks,
    Dan
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Nov 2011 Link to this post

    Hi Dan,

    The issue that you encounter is a bug of the RadPanelBar that we are already aware of. It is alreagy logged in our internal system, so that our development team could fix it. 

    Kind regards,
    Kate
    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
  4. Dan Lehmann
    Dan Lehmann avatar
    103 posts
    Member since:
    May 2011

    Posted 22 Nov 2011 Link to this post

    I found that if I set the Text field for the Items it solves the problem. I now prefer to expand the items with javascript:

    Working aspx:
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    <script type="text/javascript">
     
        function expandItem(text) {
            var panelBar = $find("<%= RadPanelBar1.ClientID %>");
            var item = panelBar.findItemByText(text);
            if (item) {
                item.expand();
            }
            else {
                alert("Item with text '" + text + "' not found.");
            }
        }
     
        function collapseItem(text) {
            var panelBar = $find("<%= RadPanelBar1.ClientID %>");
            var item = panelBar.findItemByText(text);
            if (item) {
                item.collapse();
            }
            else {
                alert("Item with text '" + text + "' not found.");
            }
        }
     
    </script>
    </telerik:RadScriptBlock>
    <style type="text/css">
         .rpItem .customHeaderItem:hover{
            background-position: 0 -200px !important;
            cursor: pointer;
        }
        .rpFirst .customHeaderItem:hover{
            background-position: 0 -201px !important;
            cursor: pointer;
        }
        .ItemCheckbox{
            float: right;
            padding-right: 10px;
        }
        label{
            font-style:normal;
            font-weight:normal;
        }
    </style>
       
    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%" Skin="Default" ExpandMode="MultipleExpandedItems">
        <Items>
       
            <telerik:RadPanelItem CssClass="customHeaderItem" Text="Panel Item 1">
                <HeaderTemplate>
                    <span class="rpOut">
                        <span class="rpExpandHandle"></span>
                        <asp:CheckBox runat="server" ID="chkIncludeItem1" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                        <span class="rpText">Panel Item 1</span>
                    </span>
                </HeaderTemplate>
                <ContentTemplate>
                    <p>Content....</p>
                </ContentTemplate>
            </telerik:RadPanelItem>
       
            <telerik:RadPanelItem CssClass="customHeaderItem" Text="Panel Item 2">
                <HeaderTemplate>
                    <span class="rpOut">
                               <span class="rpExpandHandle"></span>
                        <asp:CheckBox runat="server" ID="chkIncludeItem2" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                        <span class="rpText">Panel Item 2</span>
                          </span>
                </HeaderTemplate>
                <ContentTemplate>
                    <p>Content....</p>
                </ContentTemplate>
            </telerik:RadPanelItem>
       
        </Items>
    </telerik:RadPanelBar>

    VB:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        AddJavascript("expandItem('Panel Item 1');expandItem('Panel Item 2');")
    End Sub
    Private Sub AddJavascript(ByVal script As String)
        DirectCast(Me.Parent.FindControl("RadAjaxManager1"), Telerik.Web.UI.RadAjaxManager).ResponseScripts.Add(script)
    End Sub

    Dan
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 23 Nov 2011 Link to this post

    Hi Dan,

    Indeed the issue occurs when you are using the server-side property and the approach that you apply (using client-side) is very suitable for achieving this behavior.

    Kind regards,
    Kate
    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
Back to Top