Hello,
I've written a control that uses a RadComboBox in a modal popup that is initiated by an ajax toolkit PopupControlExtender. This works fine, however when I try to use it on a particular page in my website, the combobox doesn't behave normally and stops loading new items. The reason for this seems to be because the control has been placed inside an UpdatePanel.
If I show the modal popup automatically when the page loads then the combobox works fine - the issue only arises because the modal is hidden when the page first loads.
I understand that this is something to do with the scripts not being loaded for the RadComboBox, but I have no idea how to get around this. I've tried changing the UpdatePanel to a RadAjaxPanel but then nothing seems to work at all!
I've written a control that uses a RadComboBox in a modal popup that is initiated by an ajax toolkit PopupControlExtender. This works fine, however when I try to use it on a particular page in my website, the combobox doesn't behave normally and stops loading new items. The reason for this seems to be because the control has been placed inside an UpdatePanel.
If I show the modal popup automatically when the page loads then the combobox works fine - the issue only arises because the modal is hidden when the page first loads.
I understand that this is something to do with the scripts not being loaded for the RadComboBox, but I have no idea how to get around this. I've tried changing the UpdatePanel to a RadAjaxPanel but then nothing seems to work at all!
3 Answers, 1 is accepted
0
Hello Water,
Would you provide us with the implementation that you use at your end, in order to inspect it locally? In addition, please specify the version of our controls that you are using.
Regards,
Nencho
Telerik
Would you provide us with the implementation that you use at your end, in order to inspect it locally? In addition, please specify the version of our controls that you are using.
Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Water
Top achievements
Rank 1
Rank 1
answered on 30 Aug 2013, 10:17 AM
Hello,
I am using version 2011.2.915.35
I have managed to isolate the area where the problem is now and also found a possible solution. The error is occurring because of two things:
- The modal popup is being shown by a postback event rather than being purely client side.
- I wanted the RadComboBox to be opened as soon as the popup was displayed.
Default.aspx:
Default.aspx.cs
In this case, when the RadComboBox calls its OnClientLoad event, the drop down does not open and from then on the Load On Demand doesn't seem to work properly (it no longer loads new items as you scroll down). There are no java script errors shown in the error console in firefox.
I'm not quite sure what's going on here but it seems that the OnClientLoad event is being called before the RadComboBox scripts are loaded.
To fix the problem, replace:
OpenSearchList('{0}');
with:
setTimeout(function(){{OpenSearchList('{0}');}}, 1);
Now the ComboBox opens automatically and works correctly. It doesn't seem to matter what value you put in for the timeout.
I am using version 2011.2.915.35
I have managed to isolate the area where the problem is now and also found a possible solution. The error is occurring because of two things:
- The modal popup is being shown by a postback event rather than being purely client side.
- I wanted the RadComboBox to be opened as soon as the popup was displayed.
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit, Version=3.5.50508.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManagerMasterPage" EnablePartialRendering="true" LoadScriptsBeforeUI="false" EnableViewState="false" ScriptMode="Auto" CombineScripts="false" /> <asp:SqlDataSource runat="server" ID="SqlDataSource" ConnectionString="Data Source=localhost;Initial Catalog=MyDatabase;Integrated Security=SSPI;Persist Security Info=False;Connection Timeout=120" ProviderName="System.Data.SqlClient" SelectCommand="SELECT ID, Name from tPeople" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:LinkButton runat="server" ID="dummyButton" style="display: none;" /> <ajaxToolkit:ModalPopupExtender ID="popup" BehaviorID="popupBehave" TargetControlID="dummyButton" PopupControlID="modalPopupDiv" runat="server" EnableViewState="false" /> <div ID="modalPopupDiv" runat="server" style="width: 500px; height: 500px; border-style: solid; background-color:silver;"> <telerik:RadComboBox ID="RadComboBox" runat="server" Width="300" Height="300" Label="Select people:" EmptyMessage="Enter the name of a Person" AllowCustomText="true" MarkFirstMatch="True" DataSourceID="SqlDataSource" DataTextField="Description" DataValueField="ID" Filter="StartsWith" EnableAutomaticLoadOnDemand="True" EnableVirtualScrolling="true" ItemsPerRequest="15" style="z-index: 9999999;" > </telerik:RadComboBox> </div> <asp:LinkButton ID="clickMe" OnClick="showPopup" Text="Click Me" runat="server"/> </ContentTemplate> </asp:UpdatePanel> </form> <script type="text/javascript"> function OpenSearchList(comboBoxClientID) { var comboBox = $find(comboBoxClientID); comboBox.showDropDown(); } </script></body></html>Default.aspx.cs
using System;public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { } protected void showPopup(object sender, EventArgs e) { popup.Show(); RadComboBox.OnClientLoad = string.Format(@" function() {{ OpenSearchList('{0}'); }}", RadComboBox.ClientID); }}In this case, when the RadComboBox calls its OnClientLoad event, the drop down does not open and from then on the Load On Demand doesn't seem to work properly (it no longer loads new items as you scroll down). There are no java script errors shown in the error console in firefox.
I'm not quite sure what's going on here but it seems that the OnClientLoad event is being called before the RadComboBox scripts are loaded.
To fix the problem, replace:
OpenSearchList('{0}');
with:
setTimeout(function(){{OpenSearchList('{0}');}}, 1);
Now the ComboBox opens automatically and works correctly. It doesn't seem to matter what value you put in for the timeout.
0
Hello Water,
Thank you for sharing your solution with the community.
Regards,
Nencho
Telerik
Thank you for sharing your solution with the community.
Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.