This is a migrated thread and some comments may be shown as answers.

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

8 Answers 96 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

mark baer asked on 03 May 2011, 07:33 PM

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) 

{  try

 

{ 

 

var zone = $find(searchZone); 

zone.expandPane(searchPanelId); 

}  catch (err)

 

{ 

alert('Error opening Search Panel. ' +

err.Message); 

return; 

} }

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

<telerik:RadPane ID="SearchPane" runat="server" Height="100%" Width="20px"

Style="position:

relative;"> 

<telerik:RadSlidingZone ID="RadSlidingSearchZone" runat="server"

SlideDirection="Left"> 

<telerik:RadSlidingPane ID="RadSlidingPane1" EnableDock="false"

runat="server" Width="240px" Title="Search"

Scrolling="Y"> 

<!--SEARCH

PANEL--> 

<telerik:RadPanelBar ID="radSearchPanel"

runat="server"> 

<Items> 

<telerik:RadPanelItem runat="server" Expanded="true"

Width="240px"> 

<ContentTemplate> 

<table class="searchForm" width="215px"

border="0"> 

<tr> 

<td

class="searchSectionLabel"> 

Name 

</td> 

</tr> 

<tr> 

<td

 

<asp:TextBox ID="txtTalentSearch" CssClass="textFields" runat="server"

TabIndex="0" 

Width="200px"></asp:TextBox> 

</td> 

</tr> 

<tr> 

<td

class="searchSectionLabel"> 

Agent 

</td> 

</tr> 

<tr> 

<td> 

<telerik:RadComboBox ID="cboAgentSearch" runat="server" EmptyMessage="Type to

Search..." 

EnableAutomaticLoadOnDemand="true" EnableVirtualScrolling="true"

ItemsPerRequest="100" 

MarkFirstMatch="True" Skin="WebBlue"

Width="205px"> 

<WebServiceSettings Method="GetAgents" Path="Talent.aspx"

/> 

</telerik:RadComboBox> 

</td> 

</tr> 

<tr> 

<td

class="searchSectionLabel"> 

Agency 

</td> 

</tr> 

<tr> 

<td> 

<telerik:RadComboBox ID="cboAgencySearch" runat="server" EmptyMessage="Type

to

Search..." 

EnableVirtualScrolling="true" ItemsPerRequest="100"

EnableAutomaticLoadOnDemand="true" 

MarkFirstMatch="True" Skin="WebBlue"

Width="205px"> 

<WebServiceSettings Method="GetAgencies" Path="Talent.aspx"

/> 

</telerik:RadComboBox> 

</td> 

</tr> 

<tr> 

<td

class="searchSectionLabel"> 

Credit 

</td> 

</tr> 

<tr> 

<td> 

<telerik:RadComboBox ID="cboCreditSearch" runat="server" EmptyMessage="Type

to

Search..." 

EnableVirtualScrolling="true" ItemsPerRequest="100"

EnableAutomaticLoadOnDemand="true" 

MarkFirstMatch="True" Skin="WebBlue" Width="205px"

 

> 

<WebServiceSettings Method="GetCredits" Path="Talent.aspx"

/> 

</telerik:RadComboBox> 

</td> 

</tr> 

<tr> 

<td align="left" valign="top"

class="searchSectionLabel"> 

Genre 

 

  

<asp:Image ID="imgGenreSearch" runat="server" ImageUrl="~/Images/Search.gif"

Visible="false"

/> 

</td> 

</tr> 

<tr> 

<td> 

<asp:ListBox ID="lstGenreSearch" CssClass="textFields"

SelectionMode="Multiple"

runat="server" 

Width="205px"

OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR

AutoPostBack="true"></asp:ListBox> 

</td> 

</tr> 

<tr> 

<td align="left" valign="top"

class="searchSectionLabel"> 

Strength 

 

  

<asp:Image ID="imgStrengthSearch" runat="server"

ImageUrl="~/Images/Search.gif" Visible="false"

/> 

</td> 

</tr> 

<tr> 

<td> 

<asp:ListBox ID="lstStrengthSearch" CssClass="textFields"

SelectionMode="Multiple" 

runat="server" Width="205px"

OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR

AutoPostBack="true"></asp:ListBox> 

</td> 

</tr> 

<tr> 

<td align="left" valign="top"

class="searchSectionLabel"> 

Specialty 

 

  

<asp:Image ID="imgSpecialtySearch" runat="server"

ImageUrl="~/Images/Search.gif" Visible="false"

/> 

</td> 

</tr> 

<tr> 

<td> 

<asp:ListBox ID="lstSpecialtySearch" SelectionMode="Multiple" Width="205px"

Height="100px" 

runat="server"

OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR

AutoPostBack="true"> 

</asp:ListBox> 

</td> 

</tr> 

<tr> 

<td

class="searchSectionLabel"> 

<asp:CheckBox ID="chkTarget" runat="server" CssClass="textFields"

Text="Target"

/> 

</td> 

</tr> 

<tr> 

<td

class="searchSectionLabel"> 

Note 

 

  

<asp:Image ID="imgNoteSearch" runat="server" ImageUrl="~/Images/Search.gif"

Visible="false"

/> 

</td> 

</tr> 

<tr> 

<td> 

<asp:ListBox ID="lstNoteSearch" runat="server" SelectionMode="Multiple"

Width="205px"

OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"

<BR>

AutoPostBack="true"> 

 

</asp:ListBox> 

</td> 

</tr> 

<tr> 

<td

class="searchSectionLabel"> 

<asp:CheckBox ID="ckAvailableOnlySearch" runat="server" Text="Available Only"

/> 

</td> 

</tr> 

<tr> 

<td

class="searchSectionLabel"> 

<asp:CheckBox ID="ckIncludeInactiveSearch" runat="server" Text="Include

Inactive"

/> 

</td> 

</tr> 

<tr> 

<td align="right"

class="searchSectionLabel"> 

<telerik:RadButton ID="btnSearch" OnClick="btnSearch_Click" runat="server"

Text="Search" 

Skin="WebBlue"> 

</telerik:RadButton> 

<telerik:RadButton ID="btnReset" OnClick="btnReset_Click" runat="server"

Text="Reset" 

Skin="WebBlue"> 

</telerik:RadButton> 

</td> 

</tr> 

</table> 

</ContentTemplate> 

</telerik:RadPanelItem> 

</Items> 

</telerik:RadPanelBar> 

</telerik:RadSlidingPane> 

</telerik:RadSlidingZone> 

</telerik:RadPane> 

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

8 Answers, 1 is accepted

answered on 06 May 2011, 11:29 AM

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.

answered on 06 May 2011, 05:05 PM

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

 

if

(!IsPostBack) 

{ 

//only on first

load... 

//--------------------------- 

//Open Search

Panel(Default) 

//--------------------------- 

Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ResponseScripts.Add(String.Format("OpenSearchPanel('{0}',

'{1}')", RadSlidingSearchZone.ClientID, RadSlidingPane1.ClientID));

loadDropDowns(); 

answered on 09 May 2011, 03:50 PM

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

answered on 10 May 2011, 12:17 PM

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

answered on 11 May 2011, 02:29 PM

SlidingPaneWithinMasterPage.zip

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

answered on 11 May 2011, 02:52 PM

SlidingPaneWithinMasterPage.zip

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