RadPanelBar with Ajax inside RadSlidingPane

[chrisarauzv]

Hi Telerik Team.

I having an issue when I use ajax within a Panelbar what is placed inside a RadSlindingZone, and the Panelbar have a onitemclick Event associated, when an item of the panel bar is clicked some text have to change on the right side of the panel. This behavior work as expected outside the RadSlindingZone.

The problem is that Page Postback is trigger not the onclik event. When the Panel is within the Pane in RadSlindingZone.

Im currently using the latest release of RadControl for ASP.NET AJAX.

Thanx for your time.

Here is the code:

<%@ Register TagPrefix="radspl" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 <radspl:RadAjaxManager ID="RadAMang" runat="server" DefaultLoadingPanelID="panel1">
    <AjaxSettings>
     <radspl:AjaxSetting AjaxControlID="pRutes" >
      <UpdatedControls>
         <radspl:AjaxUpdatedControl ControlID="ajaxpanel1" />
      </UpdatedControls>
     </radspl:AjaxSetting>
    </AjaxSettings>
   </radspl:RadAjaxManager>
   <radspl:RadAjaxLoadingPanel ID="panel1" runat="server" Transparency="30" BackColor="#E0E0E0" >
     <asp:Image ID="image2" runat="server" AlternateText="........" BorderWidth="0px" ImageUrl="~/RadControls/Ajax/Skins/Default/loading.gif" />
   </radspl:RadAjaxLoadingPanel>

<div style="position:relative; height:100%; width:100%; margin:0px; overflow:hidden; margin-left:auto; margin-right:auto;">
   <radspl:RadSplitter VisibleDuringInit="false" runat="server" id="spMain" SplitBarsSize="1px" Skin="WebBlue" Orientation="Horizontal" CssClass="Posrelative" Width="98%" Height="99%"  ResizeWithParentPane="false">
       <radspl:RadPane id="SupPane" runat="server" Height="22" Scrolling="None" >
           <radspl:RadSlidingZone id="SlidingZone1" runat="server" Height="22" ClickToOpen="true" CssClass="LeftPane">
               <radspl:RadSlidingPane id="rsPane1" title="Pane 1" runat="server" OnClientExpanded="PaneExpanded">
                  <input id="save" style="width: 139px" type="button" value="B1"  />
                  <input id="Button1" style="width: 139px" type="button" value="B2"  />
                  <div id="message" style="width:750px; height:20px;" ></div>
               </radspl:RadSlidingPane>
               <radspl:RadSlidingPane id="rsPane2" title="Pane 2" runat="server" OnClientExpanded="PaneExpanded" >
                  Some Text
               </radspl:RadSlidingPane>
               <radspl:RadSlidingPane id="rsPane3" title="Pane 3" runat="server" Scrolling="none" Width="100%" Height="100%" OnClientExpanded="PaneExpanded">
                  <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
                  <tr><td height="100%" width="25%">
                    <radspl:RadPanelBar runat="server" ID="pRath" Skin="WebBlue" Height="100%" Width="100%" ExpandMode="FullExpandedItem" EnableViewState="false" PersistStateInCookie="false" OnItemClick="pRath_ItemClick" >
                    </radspl:RadPanelBar>
                  </td>
                  <td height="100%" width="50%" valign="top" style="text-align:center;">
                    <radspl:RadAjaxPanel ID="ajaxpanel1" runat="server" >
                    <div runat="server" id="div1" style="width:90%; height:90%; vertical-align:top; margin-left:auto; margin-right:auto;">
                    <table cellpadding="0" cellspacing="0" width="100%" border="1">
                    <tr>
                     <td width="30%" align="right" >text1:</td>
                     <td width="70%" align="left" style="padding-left:5px;">
                        <input runat="server" id="Text1" type="text" value=""/></td></tr>
                    <tr>
                      <td align="right">text2:</td>
                      <td align="left" style="padding-left:5px;">
                        <input id="Text2" type="text" value=""/></td></tr>
                    <tr>
                      <td align="right">Color</td>
                      <td align="left" style="padding-left:5px;">
                        <radspl:RadColorPicker runat="server" ID="IDColor" ShowIcon="true" ShowEmptyColor="false" SelectedColor="white" >
                        </radspl:RadColorPicker>
                        </td></tr>
                    <tr>
                      <td align="right">Widht</td>
                      <td align="left" style="padding-left:5px;">
                        <select onchange="" id="wd" name="wd">
                         <option value="2">2</option>
                         <option value="3" selected="selected">3</option>
                         <option value="4">4</option>
                         <option value="5">5</option>
                        </select>
                        </td></tr>
                    </table></div>
                    </radspl:RadAjaxPanel>
                  </td>
                  <td height="100%" width="25%" valign="top">
                     <input type="button" id="btnNew" class="formBtnText" value=" Salvar " onclick="Save()" />
                  </td>
                  </tr>
                  </table>
               </radspl:RadSlidingPane>
               <radspl:RadSlidingPane id="rsPane4" title="PANEL 4" runat="server" OnClientExpanded="PaneExpanded">
                  Some Text
               </radspl:RadSlidingPane>
           </radspl:RadSlidingZone>
       </radspl:RadPane>
       <radspl:RadPane ID="midPane" runat="server" CssClass="Posrelative" Scrolling="None" Height="22px">
       <label id="lblTitle">.</label>
       </radspl:RadPane>
       <radspl:RadPane id="BotPane" runat="server" CssClass="Posrelative" Scrolling="None">
         <div style="height:100%; position:relative; z-index:20; width:100%; margin:0px; border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px solid; overflow:hidden;">
         </div>
       </radspl:RadPane>
   </radspl:RadSplitter>
    </div>

[Tsvetie]

Hello chrisarauzv,
I am not quite sure how you have ajaxified your RadPanelBar - it is outside of the RadAjaxPanel with ID=ajaxpanel1, and you do not have an AjaxSetting in the RadAjaxManager with AjaxControlID=pRath (the ID of your RadPanelBar).

Could you please send us a project with 2 pages - one showing the behavior when the RadPanelBar is outside of the RadSlidingPane and the second one - showing the behavior when the RadPanelBar is inside the RadSlidingPane. In order to send us the project, you will need to open a new support ticket, as you cannot attach files to a forum thread.

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[chrisarauzv]

Hi Tsvetie, 

My mistake, the correct code in AjaxManager is:

<radspl:RadAjaxManager ID="RadAMang" runat="server" DefaultLoadingPanelID="panel1">

<AjaxSettings>

<radspl:AjaxSetting AjaxControlID="pRath" >

<UpdatedControls>

<radspl:AjaxUpdatedControl ControlID="ajaxpanel1" />

</UpdatedControls>

</radspl:AjaxSetting>

</AjaxSettings>

</radspl:RadAjaxManager>

<radspl:RadAjaxLoadingPanel ID="panel1" runat="server" Transparency="30" BackColor="#E0E0E0" >

<asp:Image ID="image2" runat="server" AlternateText="........" BorderWidth="0px" ImageUrl="~/RadControls/Ajax/Skins/Default/loading.gif" />

</radspl:RadAjaxLoadingPanel>

I will prepare the examples for you.

Thank you.

[Tsvetie]

Hello chrisarauzv,
As soon as I get your code, I will do my best to find out what is causing the problem and help you get the desired result.

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[chrisarauzv]

Hi Tsvetie:

I was making the example when I find that the problem is in the PanelBar when the Items are created in the code Behind. 

I will post a thread in the PanelBar Forum, after I check if the problem is answered there.

Thank you for your time.