Rank 1
I have some problems with adding items to RadComboBox on the client-side. I used the sample code from your site and it works great when executed via button click. But when I execute JavaScript function via ScriptManager.RegisterJavaScript it does not work. Problem is that $find returns null.
Here is the contents of my .aspx file:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikTest._Default" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!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>Untitled Page</title> |
| </head> |
| <body> |
| <script type="text/javascript"> |
| //<![CDATA[ |
| function AddNewItem() |
| { |
| var combo = $find("RadComboBox1"); |
| combo.set_closeDropDownOnBlur(false); |
| var intextput = "It does not work!"; |
| var comboItem = new Telerik.Web.UI.RadComboBoxItem(); |
| comboItem.set_text(intextput); |
| combo.trackChanges(); |
| combo.get_items().add(comboItem); |
| comboItem.select(); |
| combo.commitChanges(); |
| comboItem.scrollIntoView(); |
| } |
| //]]> |
| </script> |
| <form id="form1" runat="server"> |
| <div> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
| <ContentTemplate> |
| <telerik:RadComboBox ID="RadComboBox1" runat="server"> |
| </telerik:RadComboBox> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </div> |
| </form> |
| </body> |
| </html> |
And my .cs file
| using System; | |
| using System.Web.UI; | |
| namespace TelerikTest | |
| { | |
| public partial class _Default : System.Web.UI.Page | |
| { | |
| public void Page_PreRender(object sender, EventArgs e) | |
| { | |
| ScriptManager.RegisterStartupScript(UpdatePanel1, GetType(), "addItem", "AddNewItem ();", true); | |
| } | |
| } | |
| } |
18 Answers, 1 is accepted
You should use the var combo = $find("<%=RadComboBox1.ClientID %>"); syntax. This is required, because the UpdatePanel, in which the RadComboBox is declared is an INamingContainer and the client-side ID of the control gets changed.
I hope this helps.
Kind regards,
Erjan Gavalji
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I am afraid that your suggestion does not work. "Combo" is still null after the $find() call.
Regards,
Gregor
I suggest that you should better use the Sys.Application.load event to add items to the combobox, like:
| <form id="form1" runat="server"> |
| <script type="text/javascript"> |
| function pageLoad() |
| { |
| var combo = $find("<%=RadComboBox1.ClientID %>"); |
| combo.set_closeDropDownOnBlur(false); |
| var intextput = "It does not work!"; |
| var comboItem = new Telerik.Web.UI.RadComboBoxItem(); |
| comboItem.set_text(intextput); |
| combo.trackChanges(); |
| combo.get_items().add(comboItem); |
| comboItem.select(); |
| combo.commitChanges(); |
| comboItem.scrollIntoView(); |
| } |
| </script> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
| <ContentTemplate> |
| <telerik:RadComboBox ID="RadComboBox1" runat="server"> |
| </telerik:RadComboBox> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </form> |
You do not need to register any startup script in this case.
Hope this helps.
Sincerely yours,
Nick
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
var combo = $find("RadComboBox1");
vs. (the required)
var combo = $find("<%=RadComboBox1.ClientID %>");
In my case, I have no choice to the matter because I've created a User Control with all it's needed Client-Side code using RegisterClientScriptBlock() and I need to pass the RadComboBox control as a parameter. I need to approach it this way because my Control can exist multiple times within one page.
Any suggestions?
When you register client script from server you can use the following approach:
| var combo = $find(\"" + RadComboBox1.ClientID + "\"); |
For example:
| var myScript = "<script> var combo = $find(\"" + RadComboBox1.ClientID + "\");..</script>."; |
| RegisterClientScriptBlock("clientScript", myScript ) |
Using ClientID property is required, because the user control, in which the RadComboBox is declared is an INamingContainer and the client-side ID of the control gets changed.
Regards,
Rosi
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Thank you for your prompt reply Rosi,
Unfortunately, I've already tried this and the $find method bombs miserably. This is what I get at runtime.
function collectSelectedItems(o, o2) {
var combo = $find("TestPage_cboMyCB_RadComboBox1");
var items = combo.Items;
....
}
Microsoft JScript runtime error: Object expected
Rank 1
Just wanted to let you know that I just upgraded to ver. 2008.1.515 and after that the code works beautifully.
Thank you very much for your help.
We are glad to hear that.
Do not hesitate to contact us if you have any other questions or problems related to our controls.
Regards,
Rosi
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Hi Rosi,
I met a similar problem like this:
In my user control, dummy.ascx, I have a combo box and a piece of
javascript that will immediately check the selected index of the combo. I used:
var combo = $find("<%=RadComboBox1.ClientID %>"); to get the
combo.
My page, page1.aspx, contains the user control.
When I open the page, it always alerts me that the combo is null or not an
object.
I upgrade toFollowing is my user control's codes for that problem:
<%@ Control
Language="C#"
AutoEventWireup="true"
CodeFile="dummy.ascx.cs"
Inherits="dummy"
%>
<%@ Register
assembly="Telerik.Web.UI"
namespace="Telerik.Web.UI"
tagprefix="telerik"
%>
<telerik:RadComboBox ID="RadComboBox1"
Runat="server">
<Items>
<telerik:RadComboBoxItem Text="Option 1"
Value="1"
/>
<telerik:RadComboBoxItem Text="Option 2"
Value="2"
/>
</Items>
</telerik:RadComboBox>
<script type="text/javascript">
//This is the script inside the user control. following two lines cannot find the combo, so I commented them out
//var combo = $find("<%=RadComboBox1.ClientID %>");
//alert(combo.get_selectedIndex());
//following is a dirty solution.
window.setTimeout('showcomboinfo()', 5000);
function showcomboinfo()
{
var combo2 = $find("<%=RadComboBox1.ClientID
%>");
alert(combo2.get_selectedIndex());
}
</script>
RadControls for ASP.NET AJAX are not completely ready for use before pageLoad event of the page to be fired.
I suggest you move your code to pageLoad by the following way:
| <script type="text/javascript"> |
| function pageLoad() |
| { |
| var combo2 = $find("<%=RadComboBox1.ClientID %>"); |
| alert(combo2.get_selectedIndex()); |
| } |
| </script> |
Our general suggestion is to use the latest ASP.NET AJAX version of RadControls for your project. We have invested significant efforts to optimize and introduce new capabilities - and it will be much faster and easier for you to use it. Could you please provide us more information about the case you have tested that Telerik.Web.UI is slower than RadControls for ASP.NET.
Also note that the controls which are part of Telerik.Web.UI support features RadControls for ASP.NET do not -like adding and deleting items on client side.
Do not hesitate to ask us if you have any other questions related to our controls.
Regards,
Rosi
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Thank you very much for your reply. Your suggested code works great!
At first I was a little confused with the pageLoad() function as I took it as the traditional <body onload="...">. Finally I noticed you have also given me the link. Then I realized it is a reserved Ajax function name. Thank you very much!
My slowness case happens when I use a number of your rad controls in a single page: one RadTabStrip, 5 RadColorPicker, and a number of RadComboBox.
I can feel it is much slower after upgrading to Ajax. Recently I upgrade my IE6 to IE7 and seemed faster, but still feel my machine is out of breath(my machine is dual core, not old).
Do you know any testing software(Quick and easy to use) I can use to test the two cases? I you know, I'd like to use it to test.
Thanks again for your help and the excellent solution!
We prepared a sample project for you which demonstrates the simplest way how to calculate the page loading time.
We used the approach described here. Please review our project and let us know how it goes.
Besides, you may find helpful the following blog post.
Hope this helps.
Regards,
Rosi
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I tested your sample project and the result is:
0.33 seconds for Ajax, 0.43 seconds for classic.
I also tested three of my pages with the methods you provided me. My first two pages contains rad color pickers for Ajax, but my classic application doesn't. It is reasonable that my latest first two pages still take longer time. My third page contains two RadTreeView and one RadTabStrip, and Ajax seems runs a very little bit faster than Classic.
I also opened my CPU usage graphic tag in the TaskManager and captured some of the graphics. I found the Ajax consumes more CPU and CPU runs longer than Classic. That is why I am feeling my machine is out of breath since I start using Ajax. I think the CPU usage will be at the client side and won't hurt web hosting server, am I right?
I am very grateful for all the help you have given me.
Wishing you all the best!
To isolate the issue you could try to run the same application at another machine and measure the CPU usage.
You will get more accurate results if you don't measure the first loading time, but refresh the page few times.
Hope this helps.
Greetings,
Rosi
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."
function
nodeClicking(sender, args)
{
var comboBox = $find("<%=ddlPathFile.ClientID %>");
var node = args.get_node()
if (comboBox == null)
alert(
'error');
comboBox.set_text(node.get_text());
comboBox.hideDropDown();
}
<
telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">
<telerik:RadComboBox ID="ddlPathFile" runat="server">
</
telerik:RadComboBox>
</
telerik:RadAjaxPanel>
Rank 1
Panel
pnlQstn = (Panel)e.Item.FindControl("pnlQstn");
RadSplitter RadSplitterRepeater = (RadSplitter)e.Item.FindControl("RadSplitterRepeater");
RadPane LeftPaneRepeater = (RadPane)e.Item.FindControl("LeftPaneRepeater");
string jsCodeKey = "AutoSize" + pnlQstn.ClientID;
string jsCode;
jsCode =
"<script type=\"text/javascript\">";
jsCode +=
"function " + jsCodeKey + "() {";
jsCode +=
"var height = document.getElementById(\"" + pnlQstn.ClientID + "\").scrollHeight;";
jsCode +=
"var splitter = $find(\"" + RadSplitterRepeater.ClientID + "\");";
jsCode +=
"if (splitter == null) alert(\"Splitter null\");";
jsCode +=
"var pane = splitter.GetPaneById(" + LeftPaneRepeater.ClientID + ");";
jsCode +=
"pane.SetHeight(height);";
jsCode +=
"alert(height);";
jsCode +=
"}";
jsCode +=
"addEvent(window, 'load', " + jsCodeKey + ");";
jsCode +=
"</script>";
//Setup RadSplitter Resize
Type cstype = this.GetType();
ClientScriptManager cs = Page.ClientScript;
if (!cs.IsStartupScriptRegistered(jsCodeKey))
{
cs.RegisterStartupScript(cstype, jsCodeKey, jsCode);
}
Don't Use BODY ONLOAD in ASP.NET AJAX Websites
Regards,
Veskoni
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1