zone.expandPane(searchPanelId); not working in Firefox...

9 posts, 0 answers
  1. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 03 May 2011 Link to this post

    I am trying to autoexpand a sliding Pane(Search Pane) when the user comes to this page.  It works fine in IE and Safari(Ipad users).  They(Program Director) would like this functionality in Firefox.  I am running the latest version of Firefox, but I am getting a Javascript error when I try to call this code:

    function OpenSearchPanel(searchZone, 
    searchPanelId)<BR>       
    {<BR>           try 
    <BR>           
    {<BR>              
    <BR>              
    var zone = $find(searchZone);<BR>              
    zone.expandPane(searchPanelId);<BR>           
    }<BR>           catch (err) 
    <BR>           
    {<BR>                   
    alert('Error opening Search Panel.  '
    err.Message);<BR>                   
    return;<BR>           
    }<BR>       }

    "zone" is coming back undefined.  Below is my partial HTML.

    <telerik:RadPane ID="SearchPane" runat="server" Height="100%" Width="20px" 
    Style="position: 
    relative;"><BR>            
    <telerik:RadSlidingZone ID="RadSlidingSearchZone" runat="server" 
    SlideDirection="Left"><BR>                
    <telerik:RadSlidingPane ID="RadSlidingPane1" EnableDock="false" 
    runat="server" Width="240px" Title="Search" 
    Scrolling="Y"><BR>                    
    <!--SEARCH 
    PANEL--><BR>                    
    <telerik:RadPanelBar ID="radSearchPanel" 
    runat="server"><BR>                        
    <Items><BR>                            
    <telerik:RadPanelItem runat="server" Expanded="true" 
    Width="240px"><BR>                                
    <ContentTemplate><BR>                                    
    <table class="searchForm" width="215px" 
    border="0"><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    Name<BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td>                                                                                           
    <BR>                                                
    <asp:TextBox ID="txtTalentSearch" CssClass="textFields" runat="server" 
    TabIndex="0"<BR>                                                    
    Width="200px"></asp:TextBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    Agent<BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td><BR>                                                
    <telerik:RadComboBox ID="cboAgentSearch" runat="server" EmptyMessage="Type to 
    Search..."<BR>                                                    
    EnableAutomaticLoadOnDemand="true" EnableVirtualScrolling="true" 
    ItemsPerRequest="100"<BR>                                                    
    MarkFirstMatch="True" Skin="WebBlue" 
    Width="205px"><BR>                                                    
    <WebServiceSettings Method="GetAgents" Path="Talent.aspx" 
    /><BR>                                                
    </telerik:RadComboBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    Agency<BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td><BR>                                                
    <telerik:RadComboBox ID="cboAgencySearch" runat="server" EmptyMessage="Type 
    to 
    Search..."<BR>                                                    
    EnableVirtualScrolling="true" ItemsPerRequest="100" 
    EnableAutomaticLoadOnDemand="true"<BR>                                                    
    MarkFirstMatch="True" Skin="WebBlue" 
    Width="205px"><BR>                                                    
    <WebServiceSettings Method="GetAgencies" Path="Talent.aspx" 
    /><BR>                                                
    </telerik:RadComboBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    Credit<BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td><BR>                                                
    <telerik:RadComboBox ID="cboCreditSearch" runat="server" EmptyMessage="Type 
    to 
    Search..."<BR>                                                    
    EnableVirtualScrolling="true" ItemsPerRequest="100" 
    EnableAutomaticLoadOnDemand="true"<BR>                                                    
    MarkFirstMatch="True" Skin="WebBlue" Width="205px" 
    <BR>                                                    
    ><BR>                                                    
    <WebServiceSettings Method="GetCredits" Path="Talent.aspx" 
    /><BR>                                                
    </telerik:RadComboBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td align="left" valign="top" 
    class="searchSectionLabel"><BR>                                                
    Genre<BR>                                                
    &nbsp; 
    &nbsp;<BR>                                                
    <asp:Image ID="imgGenreSearch" runat="server" ImageUrl="~/Images/Search.gif" 
    Visible="false" 
    /><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td><BR>                                                
    <asp:ListBox ID="lstGenreSearch" CssClass="textFields" 
    SelectionMode="Multiple" 
    runat="server"<BR>                                                    
    Width="205px" 
    OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR>                                                                    
    AutoPostBack="true"></asp:ListBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td align="left" valign="top" 
    class="searchSectionLabel"><BR>                                                
    Strength<BR>                                                
    &nbsp; 
    &nbsp;<BR>                                                
    <asp:Image ID="imgStrengthSearch" runat="server" 
    ImageUrl="~/Images/Search.gif" Visible="false" 
    /><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td><BR>                                                
    <asp:ListBox ID="lstStrengthSearch" CssClass="textFields" 
    SelectionMode="Multiple"<BR>                                                    
    runat="server" Width="205px" 
    OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR>                                                                    
    AutoPostBack="true"></asp:ListBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td align="left" valign="top" 
    class="searchSectionLabel"><BR>                                                
    Specialty<BR>                                                
    &nbsp; 
    &nbsp;<BR>                                                
    <asp:Image ID="imgSpecialtySearch" runat="server" 
    ImageUrl="~/Images/Search.gif" Visible="false" 
    /><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td><BR>                                                
    <asp:ListBox ID="lstSpecialtySearch" SelectionMode="Multiple" Width="205px" 
    Height="100px"<BR>                                                    
    runat="server" 
    OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR>                                                                    
    AutoPostBack="true"><BR>                                                
    </asp:ListBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    <asp:CheckBox ID="chkTarget" runat="server" CssClass="textFields" 
    Text="Target" 
    /><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    Note<BR>                                                
    &nbsp; 
    &nbsp;<BR>                                                
    <asp:Image ID="imgNoteSearch" runat="server" ImageUrl="~/Images/Search.gif" 
    Visible="false" 
    /><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td><BR>                                                
    <asp:ListBox ID="lstNoteSearch" runat="server" SelectionMode="Multiple" 
    Width="205px" 
    OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR>                                                                    
    AutoPostBack="true"><BR>                                                    
    <BR>                                                
    </asp:ListBox><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    <asp:CheckBox ID="ckAvailableOnlySearch" runat="server" Text="Available Only" 
    /><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td 
    class="searchSectionLabel"><BR>                                                
    <asp:CheckBox ID="ckIncludeInactiveSearch" runat="server" Text="Include 
    Inactive" 
    /><BR>                                            
    </td><BR>                                        
    </tr><BR>                                        
    <tr><BR>                                            
    <td align="right" 
    class="searchSectionLabel"><BR>                                                
    <telerik:RadButton ID="btnSearch" OnClick="btnSearch_Click" runat="server" 
    Text="Search"<BR>                                                    
    Skin="WebBlue"><BR>                                                
    </telerik:RadButton><BR>                                                
    <telerik:RadButton ID="btnReset" OnClick="btnReset_Click" runat="server" 
    Text="Reset"<BR>                                                    
    Skin="WebBlue"><BR>                                                
    </telerik:RadButton><BR>                                            
    </td><BR>                                        
    </tr><BR>                                    
    </table><BR>                                
    </ContentTemplate><BR>                            
    </telerik:RadPanelItem><BR>                        
    </Items><BR>                    
    </telerik:RadPanelBar><BR>                
    </telerik:RadSlidingPane><BR>            
    </telerik:RadSlidingZone><BR>        
    </telerik:RadPane><BR><BR>

    Environment:
    Windows 7
    Firefox 4.0.1
    Latest Version of the Telerik AJAX Controls:  2011.1.413.40
    ASP.NET 4.0
    Visual Studio 2010

    Thanks

    Mark
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 06 May 2011 Link to this post

    Hello Mark,

    The most probable reason for the problem is not retrieving the correct ID of the zone. I have tried the following code to invoke the OpenSearchPanel from a button click handler:
    function showSlidingPane(button, args)
    {
        OpenSearchPanel("<%= RadSlidingSearchZone.ClientID %>", "<%= RadSlidingPane1.ClientID %>");
    }

    The SlidingPane is showing as soon as this code is executed. Please, note the way I am getting the IDs of the controls - the client-side API is working with the ClientID and it may be different from the ID itself.

    Hope this helps.

    Regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 06 May 2011 Link to this post

    Below is my Server side code to call the Javascript.  Again, please note:  this is working for IE 8 and Chrome, but not Firefox and Safari(Latest Versions). 

    thanks

    mark

     

    <P>                 
    <BR>                
    if 
    (!IsPostBack)<BR>                
    {<BR>                    
    //only on first 
    load...<BR>                    
    //---------------------------<BR>                    
    //Open Search 
    Panel(Default)<BR>                    
    //---------------------------<BR>                    
    Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ResponseScripts.Add(String.Format("OpenSearchPanel('{0}'
    '{1}')", RadSlidingSearchZone.ClientID, RadSlidingPane1.ClientID));</P>
    <P>                    
    loadDropDowns();<BR></P>

                      

  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 09 May 2011 Link to this post

    Hi Mark,

    Please, try with the following server-side code snippet:
    this.Page.RegisterStartupScript("showSlidingPane",
                String.Format("<script type='text/javascript'>Sys.Application.add_load(function() {{ OpenSearchPanel('{0}','{1}') }})</script>", RadSlidingSearchZone.ClientID, RadSlidingPane1.ClientID));

    This code waits for the controls on the page to load and just after that executes the OpenSearchPanel method.

    Hope this helps.

    Kind regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 09 May 2011 Link to this post

    It doesn't error out now, but it either doesn't work at all, or takes about 15 seconds for it to run(Firefox).  I tried it in IE, and it runs immediately, but it opens the Panel on the LEFT side of the page instead of the right(really weird).

    thanks

    mark
  7. Niko
    Admin
    Niko avatar
    387 posts

    Posted 10 May 2011 Link to this post

    Hello Mark,

    The other options is to attach to the OnClientLoad event of the splitter itself. I will assume the ID of the splitter is RadSplitter1. The the code should be the following:
    RadSplitter1.OnClientLoad = String.Format("function() {{ OpenSearchPanel('{0}','{1}') }}", RadSlidingSearchZone.ClientID, RadSlidingPane1.ClientID);

    Hope this will solve the case.

    Regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 10 May 2011 Link to this post

    I get Javascript errors now in IE(not an object) and it still does not work in Firefox.  Does it matter that this splitter is Nested?  I have a Splitter on the Master Page, then this Splitter is on the Content Page, inside the Main Content area from the Master Page RadSplitter.

    thanks

    mark
  9. Niko
    Admin
    Niko avatar
    387 posts

    Posted 11 May 2011 Link to this post

    Hello Mark,

    Please, review the attached sample website that I have setup up, with as much resemblance to your setup as possible. Please, try running the example at your end and let me know if the error persists. Also if it is possible, please, note the differences between this setup and yours.
    If this example doesn't point you in the right direction, then I should advice you to open a support ticket and send there a fully runnable sample project that reproduces the issue. Otherwise, as you can see from the communication in this thread, we are only guessing where the issue may come from.

    Hope this helps.

    All the best,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Niko
    Admin
    Niko avatar
    387 posts

    Posted 11 May 2011 Link to this post

    Hi Mark,

    Please, accept my apologies for the little mistake I make in my previous sample website. Please, try with this example and let me know of the outcome. It works around a JavaScript issue in IE only. Here is the update I made:
    theSplitter.OnClientLoad = String.Format(@"(function() {{ return function() {{ OpenSearchPanel('{0}','{1}') }} }})()", RadSlidingSearchZone.ClientID, RadSlidingPane1.ClientID);

    Hope this solves the issue.

    Regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017