Find a control inside the ItemTemplate on the client

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 28 Jul 2009 Link to this post

    Requirements
    RadControls version

    RadControls for ASP.NET AJAX
    .NET version

    2.x   and  3.x
    Visual Studio version

    2005/2008
    programming language

    JavaScript
    browser support

    all browsers supported by RadControls


      GET REFERENCE TO AN ELEMENT INSIDE THE ITEM TEMPLATE

     In some scenarios we need to get a reference to an item that is inside the Rotator's item template. For example we will get a reference to two types of objects - an HTML Image and an asp:Image control.
    First we need to get a reference to the wrapper element. This element is used in the code in order to build the IDs of the controls that we want to refer to. The RadRotator's ItemTemplate is an ITemplate and the elements inside are renamed. For example if we have an asp:Image with ID="Image1" inside the template of a RadRotator with ID="RadRotator1", the ID of the image in the first item becomes RadRotator1_i0_AspImage1. 

    Getting the wrapper element :
    function getWrapperElement(rotatorItem) 
    { 
        var itemElem = rotatorItem.get_element(); 
        var wrapper = itemElem.firstChild; 
        return wrapper; 
    } 


    Let us have the following setup, for example:
        <div class="divBorder" style="float: left;"> 
            <img alt="" id="HtmlImagePreview" src='' alt="HtmlImage" /> 
        </div> 
        <div style="float: left;"> 
            <telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="XmlDataSource1" 
                Width="100" ItemWidth="100" Height="200" ItemHeight="200" FrameDuration="5000" 
                ScrollDuration="2000" OnClientItemClicked="OnClientItemClicked"> 
                <ItemTemplate> 
                    <div style="width: 100px; height: 100px;"> 
                        <img alt="" id="HtmlImage1" src='<%# XPath("ImageURL") %>' /> 
                    </div> 
                    <div style="width: 100px; height: 100px;"> 
                        <asp:Image ID="AspImage1" runat="server" ImageUrl='<%# XPath("ImageURL") %>' AlternateText="IMAGE" /> 
                    </div> 
                </ItemTemplate> 
            </telerik:RadRotator> 
        </div> 
        <div class="divBorder" style="float: left;"> 
            <asp:Image ID="AspImagePreview" runat="server" ImageUrl='' AlternateText="AspImage" /> 
        </div> 

    We implement two functions that can be used to find a specific item inside the ItemTemplate
    1. Get a reference to an HTML element that is inside the ItemTemplate
      function findHtmlElement(id, wrapperElement) 
      { 
          // Get the image ; 
          var image = $get(id, wrapperElement); 
          return image; 
      }  
    2. Get a reference to an Asp control that is inside the ItemTemplate :
      function findAspControl(id, wrapperElement) 
      { 
          // Get the control ; 
          var control = $get(wrapperElement.id + "_" + id, wrapperElement); 
          return control; 
      }
    Note that in case you need to find an AJAX enabled control you need to use the $find() function  instead of the $get() one.
    Then we could use these functions inside the OnClientItemClicked handler (for example) of the RadRotator control and get references to the elements that are inside the currently clicked rotator's item :

    function OnRotatorItemClicked(oRotator, args) 
    { 
        // Get the wraper element ; 
        var wrapper = getWrapperElement(args.get_item()); 
     
        // Find an asp control 
        var aspImageInsideTemplate = findAspControl("AspImage1", wrapper); 
        var aspImagePreview = $get("<%= AspImagePreview.ClientID %>"); 
        aspImagePreview.src = aspImageInsideTemplate.src; 
     
        // Find an HTML element ; 
        var htmlImageInsideTemplate = findHtmlElement("HtmlImage1", wrapper); 
        var htmlImagePreview = document.getElementById("HtmlImagePreview"); 
        htmlImagePreview.src = htmlImageInsideTemplate.src; 
    } 


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.