Accessing server controls in a grid template on the client

Thread is closed for posting
2 posts, 0 answers
  1. Hristo Deshev
    Hristo Deshev avatar
    16 posts
    Member since:
    May 2004

    Posted 08 Nov 2006 Link to this post

    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:

    //idFragment is actually the server id of the control  
    //we use it to distinguish between grid columns: different columns'   
    //templates have checkboxes with different ID's  
    function checkboxClicked(e, idFragment)  
    {  
        var currentCheckBox = e.srcElement || e.target;  
          
        var inputs = document.getElementsByTagName("input");  
        for (var i = 0; i < inputs.length; i++)  
        {  
            var input = inputs[i];  
              
            //don't touch our checkbox  
            if (input.id == currentCheckBox.id)  
                continue;  
                  
            //don't touch checkboxes from other columns  
            if (input.id.indexOf(idFragment) < 0)  
                continue;  
                  
            //clear out the rest of the checkboxes  
            if (input.type && input.type == "checkbox")  
            {  
                input.checked = false;  
            }  
        }  

     

    <ItemTemplate> 
        <asp:CheckBox ID="OtherCheckBox" runat="server" onclick="checkboxClicked(event, 'OtherCheckBox')" /> 
    </ItemTemplate> 
  2. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 23 Feb 2008 Link to this post

    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:

                //idFragment is actually the server id of the control 
                //we use it to distinguish between grid columns: different columns'  
                //templates have checkboxes with different ID's 
                function checkboxClicked(e, idFragment) 
                { 
                    var currentCheckBox = e.srcElement || e.target; 
                     
                    var inputs = document.getElementsByTagName("input"); 
                    for (var i = 0; i < inputs.length; i++) 
                    { 
                        var input = inputs[i]; 
                        //don't touch our checkbox 
                        if (input.id == currentCheckBox.id) 
                            continue
                             
                        //don't touch checkboxes from other columns 
                        if (input.id.indexOf(idFragment) < 0) 
                            continue
                             
                        //clear out the rest of the checkboxes 
                        if (input.type && input.type == "checkbox"
                        { 
                            input.checked = false
                        } 
                    } 
                } 
                 
                //demonstrates finding a dropdown list using one of the techniques 
                function SelectSecondDropDownItem() 
                { 
                    var serverID = "editDropDown"
                    var tagName = "select"//dropdowns render as <select> elements 
                     
                    //var dropDown = GetRegisteredServerElement(serverID); 
                    var dropDown = GetGridServerElement(serverID, tagName); 
                    dropDown.options[1].selected = true
                } 
                 
                //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 $get(clientID); 
                } 
                 
                //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 = $get("<%=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; 
                    } 
                } 

Back to Top