title: What is the best was to access a property of a deeply embedded asp.net control using client side java script?
body: <p>I could use some advice please. </p>
  
  <h3>THE SCENARIO</h3>
  
  <p>I have a tabbed control on the page. </p>
  
  <p>There an update panel on each tab. </p>
  
  <p>Inside each update panel is an instance of a custom Web part (asp.net)</p>
  
  <p>I need to get the parameter value of the report viewer embedded in a user control in the Web part.  </p>
  
  <p>I need to retrieve this value using java script on the client side. </p>
  
  <p>To be clear, I don't want to pass up variables using hidden controls or similar methods.  </p>
  
  <p>Can I reference the property of the bottom most object, a report viewer?</p>
  
  <h3>THE UPDATE PANEL CODE</h3>
  
  <pre><code>                    &lt;td&gt;&lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                          &lt;tr class="ms-WPHeader"&gt;
                              &lt;td align="left" class="ms-wpTdSpace"&gt;&amp;#160;&lt;/td&gt;&lt;td title="Graduation Rates - My Visual WebPart" id="WebPartTitlectl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7" class="ms-WPHeaderTd"&gt;&lt;h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle"&gt;&lt;nobr&gt;&lt;span&gt;Graduation Rates&lt;/span&gt;&lt;span id="WebPartCaptionctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7"&gt;&lt;/span&gt;&lt;/nobr&gt;&lt;/h3&gt;&lt;/td&gt;&lt;td align="right" class="ms-WPHeaderTdMenu" onclick="OpenWebPartMenu(&amp;#39;MSOMenu_WebPartMenu&amp;#39;, this, &amp;#39;WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7&amp;#39;,&amp;#39;False&amp;#39;); TrapMenuClick(event); return false;"&gt;&lt;span style="display:none;"&gt;&lt;/span&gt;&lt;div class="ms-WPMenuDiv" onmouseout="this.className='ms-WPMenuDiv'" onmouseover="this.className='ms-WPMenuDivHover'"&gt;&lt;a onclick="OpenWebPartMenuFromLink(&amp;#39;MSOMenu_WebPartMenu&amp;#39;, this, &amp;#39;WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7&amp;#39;,&amp;#39;False&amp;#39;); return false;" id="WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7_MenuLink" onkeydown="WebPartMenuKeyboardClick(document.getElementById('WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7_MenuLink'), 13, 40, event)" href="#" title="Graduation Rates Web Part Menu" class="ms-wpselectlink" onblur="UpdateWebPartMenuFocus(this, 'ms-wpselectlink', 'ms-WPEditText');" onfocus="UpdateWebPartMenuFocus(this, 'ms-wpselectlinkfocus', 'ms-WPEditTextVisible');" menuid="MSOMenu_WebPartMenu"&gt;&lt;img class="ms-WPHeaderMenuImg" src="/_layouts/images/wpmenuarrow.png" alt="Graduation Rates Web Part Menu" style="border-width:0px;" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;&lt;td class="ms-WPHeaderTdSelection"&gt;&lt;span class="ms-WPHeaderTdSelSpan"&gt;&lt;input type="checkbox" id="SelectionCbxWebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7" class="ms-WPHeaderCbxHidden" title="Select or deselect Graduation Rates Web Part" onblur="this.className='ms-WPHeaderCbxHidden'" onfocus="this.className='ms-WPHeaderCbxVisible'" onkeyup="WpCbxKeyHandler(event);" onmouseup="WpCbxSelect(event); return false;" onclick="TrapMenuClick(event); return false;" /&gt;&lt;/span&gt;&lt;/td&gt;&lt;td align="left" class="ms-wpTdSpace"&gt;&amp;#160;&lt;/td&gt;
                          &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <h3>UPDATE- WORKING CODE BELOW</h3>
  
  <p>The key was creating a custom data attribute as @Fil indicated and passing from the code behind and then accessing the $.cache. And passing the clientID of the reportviewer into the javascript function to get to the current instance of the webpart child controls.</p>
  
  <pre><code>&lt;input type="hidden" id="&lt;%= ASP_SSRS.ClientID %&gt;_myDataState" 
  onchange="compareUnitValues(this.id, this.parentNode.id, '&lt;%= ReportViewer1.ClientID %&gt;',  '&lt;%= ASP_SSRS.ClientID %&gt;', '&lt;%= btnSendHiddenField.ClientID %&gt;');" /&gt;
  
  &lt;script type ="text/javascript"&gt;
  function compareUnitValues(elemt, parent, reportviewerID, value1, value2) {
    var myDataUnit = $("#" + elemt),
       parentObject = $("#" + parent),
       reportviewerObject = $("#" + reportviewerID),
       ssrs    = $("#" + value1),
       btnSend = $("#" + value2);
  
    var myDataUnitValue = myDataUnit.val();
    var myDataUnitJSON = jQuery.parseJSON(myDataUnitValue);
    var currentmyDataUnit = myDataUnitJSON.currentUnit.objectId;
    var sessioncurrentObjectId = document.getElementById('&lt;%= hiddenCurrentObjectId.ClientID %&gt;').value;
    ssrs.val(myDataUnitValue);
    var currentReportViewerParam = $("#" + reportviewerID).attr("data-report-param");
  
    if (currentmyDataUnit != currentReportViewerParam) {
    btnSend.trigger("click");
    }    
  </code></pre>
  
  <p>}</p>
  
  <p></p>
  
  FROM CODE BEHIND CREATE THE CUSTOM DATA ATTRIBUTE
  
  <pre><code>ReportViewer1.Attributes.Add("data-report-param", parsedObjectId)
  </code></pre>