Getting ClientID of control in RadGrid edit form

Question

I have Telerik RadGrid with a custom edit form. In my edit form there is a RadDatePicker to which I have added a custom footer template containing a 'Today' button.

In the OnClick event of the button I call a Javascript function which takes the control ID to set the selected date.

However, because the control is inside the edit form there is no variable created for it and the compiler throws an error when I try getting the client ID.

The RadDatePicker is declared with:

<telerik:RadDatePicker ID="ControlName" runat="server" SelectedDate='<%# Bind("Field") %>'>
  <Calendar ID="Calendar1" runat="server"> 
    <FooterTemplate> 
      <div style="width: 100%; text-align: center; background-color: Gray;"> 
        <input id="Button1" type="button" value="Today" class="button"
          onclick="GoToToday('<%= ControlName.ClientID %>')" /> 
      </div> 
    </FooterTemplate> 
  </Calendar>
</telerik:RadDatePicker>

The error I get is CS0103: The name 'ControlName' does not exist in the current context on the line referencing the ClientID.

Is there another way in which to get the ID to pass to the Javascript function?

Answer 1

Try:

OnClick=<%# "GoToToday('" + ControlName.ClientID + "')" %>

You could also set the event handler in the page_load event.

Answer 2

Maybe ClientEvents-OnLoad event of controls on form will help? It's not very beautiful, but seems to work.

First make script on page

<script type="text/javascript">
    var textBoxFromFormClientObject;

    function onTextBoxLoad(sender) {
       textBoxFromFormClientObject = sender;
    }
</script>

Then in aspx, for control on edit form that you need to get on client, add event like this

<rad:RadTextBox ID="txSomeTextBoxe" runat="server"
 ClientEvents-OnLoad="onTextBoxLoad"/>

So, when you press edit or insert button on grid, and form will be shown - global variable in javascript will be set. And you can use it to manipulate textbox. Only problem is that you need event like this for each control on form, if you want to manipulate all controls =(

Answer 3

I resorted to wrapping the Telerik RadGrid with a RadAjaxPanel and then in the server side code for the bind event I used the Ajax panel to set some Javascript variables:

RadAjaxPanel1.ResponseScripts.Add(string.Format("window['ControlNameId'] = '{0}';", ControlName.ClientID));

I then added a client side event handler to the DatePicker: ClientEvents-OnPopupOpening="AddButtonClickEvent"

The page then includes the following Javascript to bind the click event handler using jQuery:

    function AddButtonClickEvent(sender, eventArgs) {
      var cal = window['ControlNameId'];
      $('#Button1').bind('click', function() {
        GoToToday(cal);
      });
    }

And it all works as expected.