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

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.