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

$find does not work when used in ScriptManager.RegisterStartupSript

18 Answers 473 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Gregor Jaksa
Top achievements
Rank 1
Gregor Jaksa asked on 22 Apr 2008, 12:18 PM

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

Sort by
0
Erjan Gavalji
Telerik team
answered on 22 Apr 2008, 03:36 PM
Hi Gregor,

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
0
Gregor Jaksa
Top achievements
Rank 1
answered on 22 Apr 2008, 05:20 PM
Erjan,

I am afraid that your suggestion does not work. "Combo" is still null after the $find() call.

Regards,

Gregor
0
Nikolay
Telerik team
answered on 23 Apr 2008, 08:39 AM
Hi Gregor Jaksa,

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
0
MATT JEFFERSON
Top achievements
Rank 1
answered on 16 May 2008, 08:51 PM
I too, am experiencing the same issue trying to use
 
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?






0
Rosi
Telerik team
answered on 17 May 2008, 07:46 AM
Hello ,

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
0
MATT JEFFERSON
Top achievements
Rank 1
answered on 19 May 2008, 01:04 PM

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

0
MATT JEFFERSON
Top achievements
Rank 1
answered on 19 May 2008, 06:12 PM
Hi Rosi,

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.
0
Rosi
Telerik team
answered on 20 May 2008, 06:36 AM
Hello Matt ,

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
0
John
Top achievements
Rank 1
answered on 06 Jun 2008, 02:02 AM

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 to ver. 2008.1.515, the problem still exists.
But if I try to get the combo in an html control's onClick event, I can get the combo without any problem.
So I solve the problem in following dirty way as attached below. I have following questions:
1. Will telerik solve this problem in future versions?
2. I wonder this problem comes from the slowness of the .NET loading. I also feel the Telerik .NET is slower than Telerik .NET as I found the cause the CPU Usage of my machine to sky rocket. I am concerning which product I should buy now. Telerik's 10 reasons why buying didn't clarify this. Can any one give me an explanation on this point? Thank you very much.
Following 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>




0
Rosi
Telerik team
answered on 09 Jun 2008, 02:59 PM
Hi John,

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
0
John
Top achievements
Rank 1
answered on 11 Jun 2008, 02:34 AM
Hi Rosi,
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!

0
Helen
Telerik team
answered on 11 Jun 2008, 08:17 AM
Hi John,

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
0
John
Top achievements
Rank 1
answered on 12 Jun 2008, 02:02 AM
Hi Rosi,
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!
0
Helen
Telerik team
answered on 12 Jun 2008, 02:12 PM
Hello John,

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
0
Anusith Lertthanawong
Top achievements
Rank 1
answered on 05 Nov 2009, 09:29 AM
if RadComboBox within RadAjaxPanel is show error
"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>

 

0
Mark
Top achievements
Rank 1
answered on 18 Mar 2010, 04:01 PM
I am trying to do the same as above but with a splitter.  The $find always null??? Below is a copy of my code It should find a splitter on the page and resize if based on the content height in the RadPane.  AddEvent funtion makes the function run window onLoad event

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);

}

0
Veselin Vasilev
Telerik team
answered on 22 Mar 2010, 02:27 PM
Hello Mark,

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.
0
snehal kadiya
Top achievements
Rank 1
answered on 22 May 2010, 01:39 PM
I Have same problem boss, in same application in one page it is working correctly but in second page it is not working with $find(' clientid')

Tags
ComboBox
Asked by
Gregor Jaksa
Top achievements
Rank 1
Answers by
Erjan Gavalji
Telerik team
Gregor Jaksa
Top achievements
Rank 1
Nikolay
Telerik team
MATT JEFFERSON
Top achievements
Rank 1
Rosi
Telerik team
John
Top achievements
Rank 1
Helen
Telerik team
Anusith Lertthanawong
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Veselin Vasilev
Telerik team
snehal kadiya
Top achievements
Rank 1
Share this question
or