Accessing server controls in a grid template on the client

Requirements
RadGrid for ASP .NET version RadControls for ASP .NET AJAX version	Q3 2006 and later 2008.1.415 and later
.NET version	2.0 and later
Visual Studio version	2005 and later
Programming language	C#, JavaScript
Browser support	all supported by RadGrid for ASP .NET all browsers supported by RadControls for ASP .NET AJAX
To convert code from posted projects	Telerik online converter

 
PROJECT DESCRIPTION
Adding controls to a RadGrid template is easy enough, but sometimes we have to interact with them on the client, so that we save a roundtrip to the server.  This project demonstrates how to get a reference to the DOM element of a server-side control on the client.  The page has two client-side features: single select in a checkbox column; and selecting an item in a dropdown.

The hard part about this is to actually locate the DOM element.  Once we get it, the sky is the limit.  There are two possible approaches:

• Have a global registry (an array really) that keeps control ID's and emit script for every server control that will add an item to the global registry.  We use the fact that the server ID will always be present as a substring of the client ID, so we just loop over all registered elements and get the one that contains our server ID:
  
  

  //global DOM ID registry.  filled up by scripts rendered from templates.

  var registeredElements = [];

  //looks for an element that has been registered with the global array

  //requires that we emit a registration script block for each server control

  function GetRegisteredServerElement(serverID)

  {

  var clientID = "";

  for (var i = 0; i < registeredElements.length; i++)

  {

  clientID = registeredElements[i];

  if (clientID.indexOf(serverID) >= 0)

  break;

  }

  return document.getElementById(clientID);

  }

  
  We then emit a script block for every item in the template that will register the client ID:
  

  <EditItemTemplate>

  <asp:DropDownList ID="editDropDown" runat="server">

  <asp:ListItem Text="Item1"></asp:ListItem>

  <asp:ListItem Text="Item2"></asp:ListItem>

  <asp:ListItem Text="Item3"></asp:ListItem>

  </asp:DropDownList>

  <script type="text/javascript">

  registeredElements.push('<%# Container.FindControl("editDropDown").ClientID %>');

  </script>

  </EditItemTemplate>

• Get all elements of a given tag name and try to find the one whose ID contains our server ID:
  

  //walks over all elements with the specified tag name inside our grid

  //does not require registration, but is a bit more complex

  function GetGridServerElement(serverID, tagName)

  {

  if (!tagName)

  tagName = "*"; //* means all elements

  var grid = document.getElementById("<%=RadGrid1.ClientID %>");

  var elements = grid.getElementsByTagName(tagName);

  for (var i = 0; i < elements.length; i++)

  {

  var element = elements[i];

  if (element.id.indexOf(serverID) >= 0)

  return element;

  }

The same technique can be applied to implementing the single select checkboxes  for a template column.  We use the ID's to detect if we are in the right column, and generate an onclick event handler in the template:

 

An updated version of the project, using RadControls "Prometheus", is now available. You can find it attached to the initial message. The client-side code is close to the initial: