RadDatePicker inside dataGrid ClientSide set values

[Paul J]

scenario:

I have an asp:dataGrid. for each row in the grid there is a templateColumn containing a radDatePicker. Out to the side of each RadDatePicker i have an Image button that, when clicked, I need it to take the value of the radDatePicker that is to the left of the button and set all of the other RadDatePickers within the grid to that same value (Client Side).

Since all of the radDatePickers are within the grid, I wasn't sure how to pull the ID's of each. So instead, I was trying to get them the same class and then use Jquery to find them and then use the set_selectedDate(newDate) method on the client side. This is not working as I get the following message: Object doesn't support this property or method.

Not sure what I'm doing wrong...

here's my code:

<script type="text/javascript">

function setAllCheckDates (datevalue) {

$('.rdpControl').set_selectedDate(new Date(datevalue));
}
</script>


<asp:TemplateColumn HeaderText="Check Date">
   <ItemTemplate>
    <telerik:RadDatePicker Visible="true" id="rdpCheckDate" Skin="Office2007" Width="100px" Runat="server" Culture="English (United States)" TabIndex="3" Font-Size="11px" EnableEmbeddedScripts="true" CssClass="rdpControl">
 <calendar ID="Calendar1" runat="server" usecolumnheadersasselectors="False" FastNavigationStep="12" ShowRowHeaders="False" userowheadersasselectors="False" viewselectortext="x" width="170px" Skin="Office2007"></calendar>
 <DateInput ID="DateInput1" runat="server" Font-Size="11px" DateFormat="MM/dd/yyyy" EmptyMessage="mm/dd/yyyy" TabIndex="3" CssClass="checkdateinput" />
 <datepopupbutton CssClass="RadDatePicker_btnCalendar" hoverimageurl="_images/calendar_hover.gif" imageurl="_images/calendar.gif" TabIndex="3"></datepopupbutton>
 </telerik:RadDatePicker><asp:ImageButton runat="server"  ID="imgSetAllCheckDates" ImageUrl="_images/icons/icon_dates_set_all.gif" />
    </ItemTemplate>
</asp:TemplateColumn>


    Private Sub dgInterfaces_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgInterfaces.ItemDataBound
        Select Case e.Item.ItemType
            Case ListItemType.Item, ListItemType.AlternatingItem, ListItemType.SelectedItem
                Dim btnImgSetAllCheckDates As ImageButton = CType(e.Item.FindControl("imgSetAllCheckDates"), ImageButton)
                Dim rdpTemp As Telerik.Web.UI.RadDatePicker = CType(e.Item.FindControl("rdpCheckDate"), Telerik.Web.UI.RadDatePicker)

                btnImgSetAllCheckDates.Attributes.Add("onclick", String.Format("setAllCheckDates({0}.value);return false;", rdpTemp.DateInput.ClientID))
        End Select

    End Sub

[Paul J]

can't seem to get it to work another way as well. I changed my javascript code to use jQuery to pull an array of all of the RadDatePickers, as seen int he code below. I then loop through them, trying to call .set_selectedDate. and it still errors. Help would be appreciated.

what happens in the below code is:
1) I pass in the ID of the RadDatePicker that i want to use its value. get_selectedDate works fine. tmpDate gets set to its value.
i.e. tempDate's value is: Wed Sep 09 2009 00:00:00 GMT-0400 (Eastern Daylight Time)
2) element gets set to the first RadDatePicker (in this case it's id is: ctl00_ContentPlaceHolder1_dgInterfaces_ctl02_rdpCheckDate_wrapper)
3) but the page still errors on the element.set_selectedDate(tmpDate);

and I have no idea why.

<script type="text/javascript">

function setAllCheckDates (ctrlName) {
var tmpDate = $find(ctrlName).get_selectedDate();
    tmpDate.setDate(tmpDate.getDate());
    var $foo = $('.rdpControl');
    for( var i = 0, n = $foo.length;  i < n;  ++i ) {
        var element = $foo[i];
        var strID = element.id;

        element.set_selectedDate(tmpDate);
    }
    return false;
}
</script>

[Sebastian]

Hello Paul,

How to access the client objects of server controls which reside in RadGrid template columns you can see from the following code library entry on our site:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/accessing-server-controls-in-a-grid-template-on-the-client.aspx

Once you reference the client instances of the date pickers using the approach proposed there, you should be able to set appropriate selected date for them using the client API.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Paul J]

Thanks. I'll take a look at the code and see if I get it working for me.

[Paul J]

what tag should I pass it in order to then successfully call the RadDatePicker's client side APImethod "set_selectedDate(date)" ?

i tried:
ar tmpDate = $find(ctrlName).get_selectedDate();
var rdpicker = GetGridServerElement("rdpCheckDate", "RadDatePicker");
rdpicker.set_selectedDate(tmpDate);

tmpDate is successfully given a value.
"rdpCheckDate" is the ID of the RadDatePicker server side telerik control

but GetGridSErverElement did not return anything.

[Sebastian]

Hello Paul,

The code from the GetGridServerElement method will return the DOM element of the date picker instance. If you would like to use the client API to change its state, you need to reference its client object instead.

Hence you need to modify the logic to extract the ClientID of the date pickers inside the ItemCreated grid server handler and use the $find method afterwards, for example:

//assuming that the client id of the picker is stored in the ItemCreated grid handler function GetGridServerElement(clientID, tagName)

{

var rdpicker = $find(clientID);

//execute your custom code logic here

}

An alternative approach is presented in this code library thread.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Paul J]

sorry, I'm not quite following you...could you provide some sample code for extracting the ClientID of the date pickers inside the ItemCreated grid server handler ? thanks..

[Paul J]

i'm still not sure about what you were meaning as far as what code would be in the ItemCreated server handler, but after reading another post and thinking a little harder about this (which often helps), I was able to modify the code to get it work.

Below is the code. Also thanks to post: http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-find-send-the-client-id-of-asp-net-controls-in-java-script.aspx#523850, as it helped alot with the direction to add the javascript code to register the clientID's to the registeredElements javascript array (Sebastion, maybe this was what you were alluding to?)

for those who may need this post to, a quick recap:

scenario is that I have an ASP.net datagrid that contains a radDatePicker for each row in the dataGrid. I have a button to the side of each radDatePicker that, when clicked, will take the value of the radDatePicker to the left of the button and set ALL of the other radDatePIckers to this value.

So I have the following javascript first (turned out to be not much code):

   <script type="text/javascript">

            //global DOM ID registry.  filled up by scripts rendered from templates.
            var registeredElements = [];

            function setAllCheckDates (rdpClientIDToUseDate) {
               var useDate = $find(rdpClientIDToUseDate).get_selectedDate();
               GetRegisteredServerElement("rdpCheckDate",useDate);

               return false;
            }
            //looks for an element that has been registered with the global array
            //requires that we emit a registration script block for each server control
            function GetRegisteredServerElement(serverID,useDate)
            {
                var clientID = "";
                for (var i = 0; i < registeredElements.length; i++)
                {
                    clientID = registeredElements[i];
                    if (clientID.indexOf(serverID) >= 0)
                        var rdpicker = $find(clientID);
                        rdpicker.set_selectedDate(useDate);
                }
            }
    </script>

AND, in the ASP.NET dataGrid, I did the following:

<asp:TemplateColumn HeaderText="Check Date">
    <ItemTemplate>
        <telerik:RadDatePicker Visible="true" id="rdpCheckDate" Skin="Office2007" Width="100px" Runat="server" Culture="English (United States)" TabIndex="3" Font-Size="11px" EnableEmbeddedScripts="true">
        <calendar ID="Calendar1" runat="server" usecolumnheadersasselectors="False" FastNavigationStep="12" ShowRowHeaders="False" userowheadersasselectors="False" viewselectortext="x" width="170px" Skin="Office2007"></calendar>
        <DateInput ID="DateInput1" runat="server" Font-Size="11px" DateFormat="MM/dd/yyyy" EmptyMessage="mm/dd/yyyy" TabIndex="3" />
         <datepopupbutton CssClass="RadDatePicker_btnCalendar" hoverimageurl="_images/calendar_hover.gif" imageurl="_images/calendar.gif" TabIndex="3"></datepopupbutton>
     </telerik:RadDatePicker>
     <asp:ImageButton runat="server"  ID="imgSetAllCheckDates" CommandName="SetAllCheckDates" ImageUrl="_images/icons/icon_dates_set_all.gif" CssClass="imgSetAllCheckDates" />

    <script type="text/javascript">
         registeredElements.push('<%#Container.FindControl("rdpCheckDate").ClientID %>');
    </script>
    </ItemTemplate>
</asp:TemplateColumn>

and the only code I have in the codebehind is to set the onclick event for my buttons that set all the checkdate values and passes in the clientId for the radDatePicker whose date I want to use for all the rest of the radDatePickers:

    Private Sub dataGrid_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgInterfaces.ItemDataBound
        Select Case e.Item.ItemType
            Case ListItemType.Item, ListItemType.AlternatingItem, ListItemType.SelectedItem
                Dim btnImgSetAllCheckDates As ImageButton = CType(e.Item.FindControl("imgSetAllCheckDates"), ImageButton)
                Dim rdpTemp As Telerik.Web.UI.RadDatePicker = CType(e.Item.FindControl("rdpCheckDate"), Telerik.Web.UI.RadDatePicker)

                btnImgSetAllCheckDates.Attributes.Add("onclick", String.Format("setAllCheckDates('{0}');return false;", rdpTemp.ClientID))
        End Select
End Sub

so there you have it.

Sebastion, if there's a way to register the ClientID's to the javascript array from the codebehind in the dataGrid's ItemCreated event handler instead of having to put the 

registeredElements.push('<%#Container.FindControl("rdpCheckDate").ClientID %>');

within the .aspx dataGrid template column tag, please let me know.
I dislike having to put the javascript block within the grid's template column. doesn't seem as clean to me.

Thanks again for your help.

[Sebastian]

Hello Paul,

I am glad that you found a solution to achieve your goal. The code library linked in my previous reply illustrates alternative method to pass the client id of server control residing in grid template (defining global javascript variable/array for this purpose).

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.