Radsliding pane not expanded in firebox 3.0.5

[Radhika]

Hi Telerik Team,

 

We used radslidingpane in our project. But if we call’s the following script it’s working in IE but not working in Firefox 3.0.5.  Sliding pane is not expanded and how to change the height of radslidingpane. So any please help me to solve this issue.    

 

OnClientExpanded="PaneExpanded"

OnClientCollapsed="PaneCollapsed"  

 

<script type="text/javascript" language="javascript" >

 

        function doClick(buttonName, e) {

            //the purpose of this function is to allow the enter key to

            //point to the correct button to click.

            var key;

                     if (window.event)

                key = window.event.keyCode;     //IE

            else

                key = e.which;     //firefox

 

            if (key == 13) {

                //Get the button the user wants to have clicked

                var btn = document.getElementById(buttonName);

                if (btn != null) { //If we find the button click it

                    btn.click();

                    event.keyCode = 0

 

                }

            }

        }

        function PaneExpanded(sender, eventArgs) {

            tblZoomTools.style.left = tblZoomSlider.style.left = "230px";

        }

        function PaneCollapsed(sender, eventArgs) {

            tblZoomTools.style.left = tblZoomSlider.style.left = "90px";

        }

 

         

</script>

[Svetlina Anati]

Hello Radhika,

I built up a test demo where I hook up the OnClientExpanded and OnClientCollapsed events of the sliding pane but everything works as expected, the events are fired and the pane is expanded. I tested with your script declaration as:

<script type="text/javascript" language="javascript" >

and it worked under FF. Note, however, that this might cause problems in interpreting the script from some browsers and it is strongly recommended to remove the language setting and use the following definition:

<script type="text/javascript" >


Would you please check once again that the client method does not get called (e.g put a simple alert message there and see whether it shows)? 

One possible reason for the problem is that you get a javascript error from another code on your page before you expand the sliding pane, make sure that you do not have any js errors on your page. 

In case you need further assistance, please provide a live url where we can examine the issue.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Radhika]

Hi Svetlina,

 

I removed the language setting and tried but still it’s giving the same error.We dont have any Javascript error on the page. If we remove the client events  PaneCollapsed is working fine. But how ever height of the Sliding Pane is not filling the splitter size in firefox. Currently we were not deployed in the server. Please note we are using Master Page. Here is the code i use,

 

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="MapPage" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <script type="text/javascript">

 

     function PaneExpanded(sender, eventArgs) {

     tblZoomTools.style.left = tblZoomSlider.style.left = "230px";

        }

 

      function PaneCollapsed(sender, eventArgs) {

      tblZoomTools.style.left = tblZoomSlider.style.left = "90px";

        }

 

</script>

 

<telerik:RadSplitter runat="server" id="RadSplitter2" Orientation="Vertical" Width = "100%" LiveResize ="true" Height="100%" >

 <telerik:RadPane runat="server" id="RadPane1" width="22" scrolling="None" minwidth="22">                                                   

 <telerik:RadSlidingZone id="SlidingZone1" runat="server">

  <telerik:RadSlidingPane id="rspExplore" title="Explore" runat="server" width="200" EnableDock="false" OnClientExpanded="PaneExpanded" OnClientCollapsed="PaneCollapsed">                                                                                                                     

 <table style="border-width: thin; border-style: dotted; background-color: #dcdcdc;" width ="188px">

     <tr>

       <td style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;">

                                                           UnitedStates / World :</td>

     </tr> 

     <tr>

      <td align ="center">

       <telerik:RadTextBox ID="RadTextBox1" runat="server" Width="160px" Skin="Inox">

       </telerik:RadTextBox>                                                     

     </td>                                                   

   </tr>  

   <tr>

    <td align ="center">

      <telerik:RadComboBox ID="RadComboBox1" Runat="server" Skin="Inox" Width="85px" OnSelectedIndexChanged = "RadComboBox1_SelectedIndexChanged"  AutoPostBack ="true" TabIndex = "1">

   

 <Items>

    <telerik:RadComboBoxItem runat="server" Text="Location" Value="0" />

    <telerik:RadComboBoxItem runat="server" Text="24kQuad" Value="1" />

    <telerik:RadComboBoxItem runat="server" Text="TownShip" Value="2" />

 </Items>

 

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

  

</telerik:RadComboBox>

  </td>

 </tr> 

<tr>

   <td align="center">

     <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass = "basemap_button" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" style="cursor:pointer" onclick="btnSearch_Click" UseSubmitBehavior="True" TabIndex = "0"/>

   </td>                                         

 </tr>

</table>                                        

                                        

<table id = "tbl24kQuad" runat ="server" style="border-width: thin; border-style: dotted; background-color: #dcdcdc;"  width ="188px" visible = "false">

    <tr>

       <td colspan="2" style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;">Enter 24k Quadrangle Name :</td>

    </tr>

    <tr>

      <td>Quad Name :</td>

      <td>

       <telerik:RadTextBox ID="txtRadQuadName" Runat="server"

         EmptyMessage="Enter Quad" Skin="Inox" Width="100px">

       </telerik:RadTextBox>

       </td>

      </tr>

      <tr>

        <td>State</td>

        <td>

      <telerik:RadComboBox ID="cbRadQuadStates" runat="server" Width="80px" Skin ="Inox">

        

        <Items>

            <telerik:RadComboBoxItem runat="server" text="AL" Value="0" />

            <telerik:RadComboBoxItem runat="server" text="AK" Value="1" />

        </Items>

       </telerik:RadComboBox>

      </td>

     </tr>

     <tr>

      <td align="center" colspan="2" >

        <asp:Button ID="btnZoomQuad" runat="server" Text="Zoom" CssClass        ="basemap_button" OnClick ="btnZoomQuad_Click" ValidationGroup = "Quad"/>

        <asp:Label ID="lblInvalidQuad" runat="server" Text="Enter Valid Quad Name" Visible="False" Font-Bold="True" ForeColor="Red"></asp:Label>

      </td>

    </tr>

  </table>                                       

                                       

  <table id ="tblTownShip" runat ="server" style="border-width: thin; border-style: dotted; background-color: #dcdcdc;"  width ="188px" visible = "false">

<tr>

  <td colspan="3" style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;">

    Enter TownShip/Range :</td>

  </tr>

  <tr>

     <td>TownShip</td>

     <td>

       <telerik:RadTextBox ID="txtRadTownShip" Runat="server" ValidationGroup = "TownShip" EmptyMessage="Enter TownShip" Skin="Inox" Width="50px">

       </telerik:RadTextBox>

    </td>

    <td>

       <asp:RadioButtonList ID="rblTownShip" runat="server" RepeatDirection="Horizontal">

       <asp:ListItem Value="1">N</asp:ListItem>

       <asp:ListItem Value="2">S</asp:ListItem>

       </asp:RadioButtonList>

    </td>

  </tr>

  <tr>

   <td>Range</td>

   <td>

     <telerik:RadTextBox ID="txtRadTownShipRange" Runat="server" ValidationGroup = "Quad"

      EmptyMessage="Enter Range" Skin="Inox" Width="50px">

     </telerik:RadTextBox>

    </td>

    <td>     

        <asp:RadioButtonList ID="rblRange" runat="server" RepeatDirection="Horizontal">

        <asp:ListItem Value="1">E</asp:ListItem>

        <asp:ListItem Value="2">W</asp:ListItem>

        </asp:RadioButtonList>

    </td>

  </tr>

  <tr>

    <td>State</td>

    <td colspan="2">

   

<telerik:RadComboBox ID="cbRadTownShipStates" runat="server" Width="100px" Skin = "Inox">

 

   <Items>

       <telerik:RadComboBoxItem runat="server" text="AL" Value="0" />

       <telerik:RadComboBoxItem runat="server" text="AK" Value="1" />

    </Items>

          

     <CollapseAnimation Duration="200" Type="OutQuint" />

     </telerik:RadComboBox>

       </td>

     </tr>

     <tr>

<td colspan="3" align="center" valign ="bottom">

<asp:Button ID="btnZoomTownShip" runat="server" Text="Zoom" valign ="bottom" ValidationGroup = "TownShip" CssClass ="basemap_button" OnClick ="btnZoomTownShip_Click" />

<asp:Label ID="lblInvalidTownShip" runat="server" Text="Enter Valid TownShip" Visible="False" Font-Bold="True" ForeColor="Red"></asp:Label>

  </td>

 </tr>

</table>      

                                      

<table id ="tblSelectOptions" runat ="server" style="border-width: thin; border-style: dotted; background-color: #dcdcdc;"  width ="188px" visible = "true">

 <tr>

    <td style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;">

                                                   Make a Selection :</td>

  </tr>             

  <tr>

    <td>

     <asp:RadioButtonList ID="rblSelection" runat="server" RepeatDirection="Vertical"

                                                   onselectedindexchanged="rblSelection_SelectedIndexChanged" AutoPostBack="True" >

                                                     

 <asp:ListItem Value="0" Selected="True">Select using Tools</asp:ListItem>

 <asp:ListItem Value="1">Select using Co-ordinates</asp:ListItem>

  </asp:RadioButtonList>

   </td>

  </tr>  

  <tr>

   <td align = "center">

     <asp:Button ID="btnCreateTabFiles" runat="server" Text="GetCoordinates" Width = "100" CssClass ="basemap_button" onclick="btnCreateTabFiles_Click"/>

   </td>

  </tr>            

</table>       

 

<table id ="tblSubmitCoordinates" runat ="server" style="border-width: thin; border-style: dotted; background-color: #dcdcdc;"  width ="188px" Visible="false">

  <tr>

    <td colspan="2" style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;"> Selected Co-ordinates:</td>

  </tr>

  <tr>

    <td>Corner 1 - Lat :</td>

    <td>

      <asp:Label ID="lblLat1" runat="server"></asp:Label>

    </td>

</tr>

<tr>

   <td>Corner 1 - Long : </td>

   <td><asp:Label ID="lblLong1" runat="server"></asp:Label></td>

</tr>

<tr>

   <td>Corner 2 - Lat : </td>

   <td><asp:Label ID="lblLat2" runat="server"></asp:Label></td>

</tr>

<tr>

  <td>Corner 2 - Long :</td>

   <td><asp:Label ID="lblLong2" runat="server"></asp:Label></td>                                            

  </tr>   

  <tr>

     <td align = "center" colspan ="2">

       <asp:Button ID="btnSubmitCoordinates" runat="server" Text="SubmitCoordinates" Width = "120"CssClass ="basemap_button" /></td>

  </tr>                                        

 </table>    

                                            

 <table id ="tblSelectCoordinates" runat ="server" style="border-width: thin; border-style: dotted; background-color: #dcdcdc;"  width ="188px" Visible="false">

   <tr>

     <td colspan ="2" style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;"> Make a Selection : </td>

   </tr>             

   <tr>

      <td colspan = "2">Corner 1 : </td>

    </tr>  

    <tr>

       <td>Lat *</td>

       <td><telerik:RadTextBox ID="txtRadLat1" runat="server" Width="110px">

           </telerik:RadTextBox>                 

                                                   

      <asp:RangeValidator runat="server" id="RangeValidator" ErrorMessage="RangeValidator" Display="Dynamic" Font-Size="X-Small" ControlToValidate="txtRadLat1" Type="Double" MaximumValue="90" MinimumValue="-90">Valid

 values lie between 90 and -90</asp:RangeValidator>

     

<asp:CompareValidator id="CompareValidator1" runat="server" ErrorMessage="CompareValidator" Display="Dynamic" Font-Size="X-Small" ControlToValidate="txtRadLat1" Type="Double" ControlToCompare="txtRadLat2" Operator="GreaterThan">Has to be greater than Corner 2 latitude</asp:CompareValidator>

     </td>

    </tr> 

     <tr>

       <td>Long *</td>

       <td><telerik:RadTextBox ID="txtRadLong1" runat="server" Width="110px">

           </telerik:RadTextBox>

        <asp:RangeValidator id="RangeValidator2" runat="server" ErrorMessage="RangeValidator" Display="Dynamic" Font-Size="X-Small" ControlToValidate="txtRadLong1" Type="Double" MaximumValue="180" MinimumValue="-180">Valid values lie between 180 and -180</asp:RangeValidator>

        </td>

       </tr>                     

       <tr>

           <td>Corner 2 : </td>

        </tr>

        <tr>

            <td>Lat *</td>

             <td>

                 <telerik:RadTextBox ID="txtRadLat2" runat="server" Width="110px">

                  </telerik:RadTextBox>                  

     <asp:RangeValidator runat="server" id="RangeValidator1" ErrorMessage="RangeValidator" Display="Dynamic" Font-Size="X-Small" ControlToValidate="txtRadLat2" Type="Double" MaximumValue="90" MinimumValue="-90">Valid

 values lie between 90 and -90</asp:RangeValidator>

    </td>

  </tr> 

  <tr>

       <td>Long *</td>

        <td>

           <telerik:RadTextBox ID="txtRadLong2" runat="server" Width="110px">

           </telerik:RadTextBox>

          <asp:CompareValidator id="CompareValidator2" runat="server" ErrorMessage="CompareValidator" Display="Dynamic" Font-Size="X-Small" ControlToValidate="txtRadLong2" Type="Double" ControlToCompare="txtRadLong1" Operator="GreaterThan">Has to be greater than Corner 1 Longitude</asp:CompareValidator><br />

           

      <asp:RangeValidator id="RangeValidator4" runat="server" ErrorMessage="RangeValidator" Display="Dynamic" Font-Size="X-Small" ControlToValidate="txtRadLong2" Type="Double" MaximumValue="180" MinimumValue="-180">Valid values lie between 180 and -180</asp:RangeValidator>

      </td>

   </tr>        

   <tr>

     <td colspan ="2" align = "center">

       <asp:Button ID="btnSelectCoordinates" runat="server" Width="130"

        Text="Select Coordinates" CssClass ="basemap_button"

        onclick="btnSelectCoordinates_Click"/>

       </td>

      </tr>          

    </table>

  </telerik:RadSlidingPane>

                                   

   <telerik:RadSlidingPane id="rspCoverageMaps" title="Coverage Maps" runat="server" width="200" EnableDock="false" OnClientExpanded="PaneExpanded" OnClientCollapsed="PaneCollapsed">

  <table style="border-width: thin; border-style: dotted; background-color: #dcdcdc;" width ="188px" >

   <tr>

      <td style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;">

        <asp:CheckBox ID="cbRemoveCoverage" runat="server" AutoPostBack="True" ToolTip="Remove Coverage" OnCheckedChanged ="cbRemoveCoverage_CheckedChanged" />

    Coverage Maps :</td>

    </tr>             

    <tr>

      <td>

         <asp:RadioButtonList ID="rblCoverageMaps" runat="server" AutoPostBack="True"

          onselectedindexchanged="rblCoverageMaps_SelectedIndexChanged">

          </asp:RadioButtonList>

         </td>

        </tr>

      </table>

    </telerik:RadSlidingPane>

<telerik:RadSlidingPane id="rspHelp" title="Help" runat="server" width="200" EnableDock="false" OnClientExpanded="PaneExpanded" OnClientCollapsed="PaneCollapsed">

   <table style="border-width: thin; border-style: dotted; background-color: #dcdcdc;" width ="188px">

     <tr>

       <td style="color: #FFFFFF; font-weight: bold; background-color: #6584a3;">

            Help :</td>

     </tr>             

      <tr>

    <td>                                              

      <asp:Label ID="Label7" runat="server">Please explore the map using the tools or by selecting an option from the drop down list. Once you zoom to an area less than 1000 miles, select your area of interest by clicking the Rectangle or buffer or polygon selection tools.</asp:Label>

   </td>

    </tr>

    <tr>                  

       <td>

         <asp:Label ID="Label8" runat="server"></asp:Label>

        </td>

      </tr>

      <tr>

        <td>

          <asp:Label ID="Label9" runat="server"></asp:Label>

         </td>                   

        </tr>

     </table>

    </telerik:RadSlidingPane>

  </telerik:RadSlidingZone>                                           

</telerik:RadPane>

        

<telerik:RadSplitBar runat="server" id="RadSplitBar4" />

   <telerik:RadPane runat="server" id="RadPane3" >

       <div style= "position:relative">

        <cc1:MapControl ID="MapControl1" runat="server" MapAlias="Map1" UseDesigntimeWorkspace="True" Height="300" Width="300" OnPreRender = "MapControl1_PreRender"/>

         </div>

     </telerik:RadPane>

 </telerik:RadSplitter>

 

</asp:Content>

   Please Help me to solve this issue.If u need any further details please let me know...

[Svetlina Anati]

Hello Radhika,

Since the client-side events OnClientExpanded and OnClientCollapsed are correctly working on my side and also in all the online demos and we have not received report for such a problem from another customer, I believe that the issue is related to some javascript error which is thrown from your custom code. I tried to figure out what might be causing this but I am afraid that your code is not sufficient - as far as I can see you are manipulating some HTML element  called tblZoomTools but I could not see where you reference it in your global variable. This being said, the best way to proceed is that you prepare a very simple demo page with all the needed code and share the source here. Please, include all the needed javascript, especially the code concerning the tblZoomTools  element.

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.