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

[mark baer]

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

[Niko]

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

[mark baer]

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>

                  

[Niko]

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

[mark baer]

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

[Niko]

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

[mark baer]

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

[Niko]

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

[Niko]

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