Panel bar structure hide or disappeared

[lupotana]

Good Morning,
I use a RadPanelBar to hide or show the filter of a grid .

I use the same code in two webform identically (in both pages the PanelBar and the grid are within
a RadPageView,It could be an important detail) .

Image Bug 001 : Initial scenario panel bar filters initial uncompressed (Page correct)
Image Bug 002 : panel expanded bar after pressing the button "+" (Page correct)

In the second page, the filter part already expanded but it is not visible the entire structure of
panel bar but only its content . ( Image Bug 003 )
If I click on any part near the filter panel scomapre ( Image Bug 004 ) .

Does anyone know help me ?
I tried to replace the element ContentTemplate RadPanelItem with an ItemTemplate
but reading the documentation is it correct  use a ContentTemplate (in fact
the first page works ).

 

This is the code of first page (OK)

     <telerik:RadPageView ID="rpwCompany" runat="server">
          <div class="divFilters">
              <telerik:RadPanelBar runat="server" ID="pnlBarFilterCompany" Width="100%" ExpandMode="MultipleExpandedItems" Font-Bold="true">
                  <Items>
                      <telerik:RadPanelItem Expanded="false">
                          <ContentTemplate>
                              <div class="filterBox">
                                  <div class="filterItemContainer">
                                      <div class="filterItem">
                                          <asp:Label ID="lblTagFilterCompanyCode" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                          <telerik:RadTextBox ID="txtFilterCompanyCode" runat="server" MaxLength="16" Width="100px" />
                                      </div>

                                      <div class="filterItem">
                                          <asp:Label ID="lblTagFilterCompanyName" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                          <telerik:RadTextBox ID="txtFilterCompanyName" runat="server" MaxLength="16" Width="180px" />
                                      </div>
                                  </div>
                                  <div class="filterButton">
                                      <telerik:RadButton ID="btnSearchCompany" runat="server" Width="140px" Height="65px" Font-Bold="true"
                                          Font-Size="16px" ForeColor="#0167B1" OnClick="btnSearchCompany_Click">
                                          <Icon PrimaryIconUrl="~/Images/24x24/search.png" PrimaryIconHeight="24px" PrimaryIconWidth="24px" />
                                      </telerik:RadButton>
                                      <telerik:RadButton ID="btnResetFilterCompany" runat="server" Width="140px" Height="35px" Font-Bold="true"
                                          Font-Size="16px" ForeColor="Red" OnClick="btnResetFilterCompany_Click" Skin="Sunset">
                                      </telerik:RadButton>
                                  </div>
                              </div>
                          </ContentTemplate>
                      </telerik:RadPanelItem>
                  </Items>
              </telerik:RadPanelBar>
          </div>
          <telerik:RadGrid ID="gvListCompany" runat="server" AllowPaging="True" ...............

 This is the code of second page (Error)

<telerik:RadPageView ID="rpwValidity" runat="server">
            <div class="divFilters">
                <telerik:RadPanelBar runat="server" ID="pnlBarFilterValidity" Width="100%" ExpandMode="MultipleExpandedItems" Font-Bold="true">
                    <Items>
                        <telerik:RadPanelItem Expanded="false">
                            <HeaderTemplate></HeaderTemplate>
                            <ContentTemplate>
                                <div class="filterBox">
                                    <div class="filterItemContainer">
                                        <div class="filterItem">
                                            <asp:Label ID="lblTagFilterValidityCode" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                            <telerik:RadTextBox ID="txtValidityCodeFilter" runat="server" MaxLength="16" Width="100px" />
                                        </div>

                                        <div class="filterItem">
                                            <asp:Label ID="lblTagFilterValidityName" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                            <telerik:RadTextBox ID="txtValidityNameFilter" runat="server" MaxLength="16" Width="180px" />
                                        </div>

                                        <div class="filterItem">
                                            <asp:Label ID="lblTagFilterOPTExpression" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                            <telerik:RadTextBox ID="txtOPTExpressionFilter" runat="server" MaxLength="16" Width="180px" />
                                        </div>

                                        <div class="filterItem">
                                            <asp:Label ID="lblTagFilterStartProductionDateFrom" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                            <telerik:RadDatePicker ID="rdpStartProductionDateFromFilter" runat="server" Width="180px" AutoPostBack="true" OnSelectedDateChanged="rdpStartProductionDateFromFilter_SelectedDateChanged" />
                                        </div>

                                        <div class="filterItem">
                                            <asp:Label ID="lblTagFilterStartProductionDateTo" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                            <telerik:RadDatePicker ID="rdpStartProductionDateToFilter" runat="server" Width="180px" AutoPostBack="true" OnSelectedDateChanged="rdpStartProductionDateToFilter_SelectedDateChanged" />
                                        </div>

                                        <div class="filterItem">
                                            <asp:Label ID="lblTagFilterLanguage" runat="server" SkinID="TagFilter" CssClass="filterLabel" />
                                            <telerik:RadComboBox ID="ddlLanguageFilter" runat="server" Width="120px" />
                                        </div>

                                    </div>
                                    <div class="filterButton">
                                        <telerik:RadButton ID="btnSearchValidity" runat="server" Width="140px" Height="65px" Font-Bold="true"
                                            Font-Size="16px" ForeColor="#0167B1" OnClick="btnSearchValidity_Click">
                                            <Icon PrimaryIconUrl="~/Images/24x24/search.png" PrimaryIconHeight="24px" PrimaryIconWidth="24px" />
                                        </telerik:RadButton>
                                        <telerik:RadButton ID="btnResetFilterValidity" runat="server" Width="140px" Height="35px" Font-Bold="true"
                                            Font-Size="16px" ForeColor="Red" OnClick="btnResetFilterValidity_Click" Skin="Sunset">
                                        </telerik:RadButton>
                                    </div>
                                </div>
                            </ContentTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
            <telerik:RadGrid ID="gvListValidity" runat="server" AllowPaging="True" ......

[Nencho]

Hello Marco,

I would suggest you to set the PanleBarItems' Text or the HeaderTemplate. Thus you will achieve a user-friendly experience and more intuitive scenario, where the end-user will be aware if the PanelBarItem with the filter is collapsed or not.

Regards,
Nencho
Telerik