Get Control from ASCX Edit Window

[Blain Levitt]

I have a rad grid that uses an ascx for the edit form in a popup.  In that ascx I have images that I'm swapping image URL's on mouse over with java script.  I'm running into a problem because when using getelementbyid, the images are out of scope in the default .aspx and return null.  The solution works fine in the default.aspx but not in the corresponding edit window ascx.  Do I first need to reference the grid as the parent of the image?

<span
                      onmouseover="toggleEdit('PhoneEdit', 'over', $get('Toggled5'))"
                      onmouseout ="toggleEdit('PhoneEdit', 'up', $get('Toggled5'))"
                      onmousedown="toggleEdit('PhoneEdit', 'selected', $get('Toggled5'))"
                      onclick="toggleClick('PhoneEdit', 'click', $get('Toggled5'));return false">
                    <img src="Images/filter_phone_up.gif" id="PhoneEdit" style="border:0; outline:0;" alt="" />
                    <asp:HiddenField ID="Toggled5" runat="server" Value="up" />
                  </span> 

Thanks
Blain

[Georgi Krustev]

Hello Blain,

After I reviewed your code snippet I assume the problem is due to the fact that the id of the hidden field is changed after it is put in other naming container. This means that if the id is 'Toggle5' in default.aspx in the ascx page the same control will have different id, for instance, 'UserControl1_Toggle5'.

There are two solutions for this case.

The first is to hard-code the id, as you did in your code snippet. But you need to find out what the real client id of the control is after it is rendered (inspecting the html source of the page). The client id depends on the naming container of the control. The naming container for a given control is the parent control above it in the hierarchy that implements the INamingContainer interface.

The second solution is to use server-side tags <%= %> and to get with them the ClientID of the control. Thus you can move the control anywhere you want and still reference its ClientID correctly.

Here is a code snippet illustrating how to achieve this:

<span
                      onmouseover="toggleEdit('PhoneEdit', 'over', $get('<%= Toggled5.ClientID%>'))" return false">

                    <asp:HiddenField ID="Toggled5" runat="server" Value="up" />
                  </span>

Greetings,
Georgi Krustev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Blain Levitt]

Thank you very much, this solved the issue.