Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / General, Installation, Licensing / Using dynamic/unique names for JavaScript functions

Using dynamic/unique names for JavaScript functions

Article Info

Rating: 4

Article information

Article relates to

 RadControls

Created by

 Veskoni, Telerik

Last modified

 02/14/2008

Last modified by

 Veskoni, Telerik


PROBLEM
There are cases where you will need to use dynamic/unique names for JavaScript functions.
Consider the following scenario:
A user control contains RadControl (RadTreeView, RadComboBox, RadMenu, etc.) and some other "standard" control - ListBox, TextBox, Label, etc.
Let's put RadTreeView and ListBox in the user control for example.
Assume you want to update the ListBox after every client check. Usually you use the code like this:

"Classic" RadTreeView:

<radT:RadTreeView ID="RadTreeView1"  
    runat="server"  
    CheckBoxes="True" 
    AfterClientCheck="afterClientCheck"> 

function afterClientCheck(node) 
{           
    var listBox1 = document.getElementById("<%=ListBox1.ClientID%>"); 
    if (node.Checked==true) 
    {     
        var optn = document.createElement("OPTION"); 
        optn.text = node.Text; 
        optn.value = node.Value; 
        listBox1.options.add(optn); 
    } 
} 


RadTreeView AJAX (Prometheus):

<radT:RadTreeView ID="RadTreeView1"          
runat="server"           
CheckBoxes="True"        
OnClientNodeChecked="afterClientCheck">  

<script type="text/javascript"> 
function afterClientCheck(sender, eventArgs)         
{                            
    var listBox1 = document.getElementById("<%=ListBox1.ClientID%>"); 
    var node =  eventArgs.get_node(); 
                     
    if (node.get_checked()==true)                
    {                            
        var optn = document.createElement("OPTION");                         
        optn.text = node.get_text();                         
        optn.value = node.get_value();                       
        listBox1.options.add(optn);                  
     }       
}   
</script> 

Now if you put that user control in a page and open it - it will work as expected - checking a CheckBox of node will add node's text to the ListBox.
Now add a second instance of the user control on the same page. You will notice that checking a node of the first TreeView updates the second ListBox, not the first one.
The problem occurs because the JavaScript function afterClientCheck existed two times on the page (because there two instances of the user control). The first afterClientCheck updates the first ListBox and the second one updates the second ListBox. But since the name of the function is the same - the second one gets executed every time.


SOLUTION
Use dynamic/unique names for the Javascript function.
Here are the steps you need to do:
  • Rename the JavaScript function as follows:
"Classic" RadTreeView:
function afterClientCheck_<%= ClientID %>(node)  


RadTreeView AJAX (Prometheus):

function afterClientCheck_<%= ClientID %>(sender, eventArgs) 


  • Set the the name of the AfterClientCheck event handler in the code behind, not in the aspx file like:
"Classic" RadTreeView:

protected void Page_Load(object sender, EventArgs e)  
{  
    RadTreeView1.AfterClientCheck = "afterClientCheck_" + this.ClientID;  
}  
 


RadTreeView AJAX (Prometheus):

protected void Page_Load(object sender, EventArgs e) 
{ 
    RadTreeView1.OnClientNodeChecked = "afterClientCheck_" + this.ClientID; 
} 


Now two different javascript functions are rendered: afterClientCheck_WebUserControl1(node) and afterClientCheck_WebUserControl2(node) and it is working as expected.

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.