using rad datepicker

[Senthil ramna]

when i use raddate picker in a default page the calender pops up but when i keep it in my page the calender is not popping.
should i set anything or something.
It gives a # in the ip above but calender doesnot pop.
i am using version 2009.1.311.35.

[Radoslav]

Hello Senthil,

I tried to reproduce the described issue, but to no avail. Could you please post your page's markup code with the related code behind.
Looking forward for your reply.

Greetings,
Radoslav
the Telerik team

[Senthil ramna]

Thank you for your reply Radoslav but this is the situation.
i was trying to use ajax calender extender inside radgrid.
the problem is when i use ajax calender extender part of calender that pops is getting hidden.
please check attached image.
the below is the markup of radgrid where i am using it.

<telerik:RadGrid ID="grd_compoff" AutoGenerateColumns="False" runat="server" Width="100%"
                                  GridLines="Vertical" BackColor="White"  Skin="Web20" HeaderStyle-HorizontalAlign="Center"
                                  HeaderStyle-Font-Bold="true" HeaderStyle-Font-Names="Arial"
                                 AllowPaging="True" AllowSorting="True"
                              PageSize="100"
                             onpageindexchanged="grd_compoff_PageIndexChanged"
                             onsortcommand="grd_compoff_SortCommand"
                             onitemdatabound="grd_compoff_ItemDataBound"
                             onitemcreated="grd_compoff_ItemCreated"
                             oninsertcommand="grd_compoff_InsertCommand" >

                            <ItemStyle Font-Names="Arial" HorizontalAlign="Left" BackColor="white"></ItemStyle>
                            <AlternatingItemStyle Font-Names="Arial" HorizontalAlign="Left" BackColor="white"/>

                <HeaderStyle HorizontalAlign="Center" Font-Bold="True" Font-Names="Arial"></HeaderStyle>

                           <ClientSettings>
                                        <Scrolling AllowScroll="true"  UseStaticHeaders="true" />
                                         <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" />
                           </ClientSettings>
                           <PagerStyle Mode="NumericPages" />

                            <MasterTableView AutoGenerateColumns="false" Width="100%">
<telerik:GridTemplateColumn SortExpression="Comp Off Date (Need to work on)"
                                        HeaderText="Comp Off Date (Need to work on)"
                                        UniqueName="Comp Off Date (Need to work on)" >

                                       <ItemTemplate>
                                       <asp:Label ID="lblCoffdate" runat="server" ></asp:Label>

                                             <%--<asp:LinkButton ID="lnkSetdate" runat="server" onclick="lnkSetdate_Click">Set date</asp:LinkButton>--%>
                                    <asp:TextBox ID="txtCoffdate" runat="server"  Width="145px"></asp:TextBox>
                                        <cc1:CalendarExtender ID="calextCoff" runat="server" Format="dd-MMM-yyyy" TargetControlID="txtCoffdate">
                                        </cc1:CalendarExtender>






                                        </ItemTemplate>
                                          <ItemStyle Wrap="false"/>
                                    </telerik:GridTemplateColumn>
 </Columns>
                                <NoRecordsTemplate>No records found</NoRecordsTemplate>
                            </MasterTableView>
                         </telerik:RadGrid>

So if it is not possible to use ajax calender extender inside radgrid, then please let me know how to use rad date picker the same way
thank you for your help.

[Radoslav]

Hello Senthil,

Could you please try adding the following css style and let me know if the issue still persists:
 

<style type="text/css">
     .ajax__calendar_days td
     {
         padding: 0px !important;
         margin: 0px !important;
         border: none !important;
     }
</style>

Also you could try using the DatePicker instead of using the CalendarExtender.

Best wishes,
Radoslav
the Telerik team

[Senthil ramna]

Thanks a million Radoslav regarding the ajax problem, the style you gave works like a charm and calender is diplaying as it should.
but for month and year also i kept a same style sheet just changed the names like ajax__calendar_months and ajax__calendar_years  , but thanx for getting me started on this.
but i do have a few problems with radDate picker, until i got your reply i was trying to it in my page.
when i press the pop up button for the radDatepicker the calender is not popping up i.e. nothing happens.
Below is my markup...

                                  GridLines="Vertical" BackColor="White"  Skin="Web20" HeaderStyle-HorizontalAlign="Center"
                                  HeaderStyle-Font-Bold="true" HeaderStyle-Font-Names="Arial"
                                 AllowPaging="True" AllowSorting="True"
                              PageSize="100"
                             onpageindexchanged="grd_compoff_PageIndexChanged"
                             onsortcommand="grd_compoff_SortCommand"
                             onitemdatabound="grd_compoff_ItemDataBound"
                             onitemcreated="grd_compoff_ItemCreated"
                             oninsertcommand="grd_compoff_InsertCommand" >

                            <ItemStyle Font-Names="Arial" HorizontalAlign="Left" BackColor="white"></ItemStyle>
                            <AlternatingItemStyle Font-Names="Arial" HorizontalAlign="Left" BackColor="white"/>

                <HeaderStyle HorizontalAlign="Center" Font-Bold="True" Font-Names="Arial"></HeaderStyle>

                           <ClientSettings>
                                        <Scrolling AllowScroll="true"  UseStaticHeaders="true" />
                                         <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" />
                           </ClientSettings>
                           <PagerStyle Mode="NumericPages" />

                            <MasterTableView AutoGenerateColumns="false" Width="100%">
<telerik:GridTemplateColumn SortExpression="Comp Off Date (Need to work on)"
                                        HeaderText="Comp Off Date (Need to work on)"
                                        UniqueName="Comp Off Date (Need to work on)" >

                                       <ItemTemplate>
                                       <asp:Label ID="lblCoffdate" runat="server" ></asp:Label>

 <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
                                           </telerik:RadDatePicker>





                                        </ItemTemplate>
                                          <ItemStyle Wrap="false"/>
                                    </telerik:GridTemplateColumn>
 </Columns>
                                <NoRecordsTemplate>No records found</NoRecordsTemplate>
                            </MasterTableView>
                         </telerik:RadGrid>

kindly let me know if i am missing something.
Also i did check the link you gave before hand on how to use Radpicker.
again thanks for providing the style for calender extender... it helped out a lot...

[Radoslav]

Hello Senthil,

I tried to reproduce the described issue but to no avail. I am sending you a simple example based on your code. Please check it out and let me know what differs in your case. Also I uploaded a video on this link, which shows how the example works on my side.
Looking forward for your reply.

Sincerely yours,
Radoslav
the Telerik team

[Senthil ramna]

Thanks for the reply Radoslav and also for going at great lengths to create an example.
the thing is i tried adding radDatePicker in a new page that i am creating it worked as it should so my question being now.
--->Does using someother control on the page like ajax modal popup extender or some other control prevent the calender from opening.
---->When i do put it in my page nothing happens and a "#" is appended to the end of my page url.

I am not sure what is happening.
Please let me know if you can think of something cause i am at my wits end.
Thansk anyways.

[Radoslav]

Hi Senthil,

Using of ajax control toolkit controls on the page could not prevent the calendar from opening. I am sending you a simple example which demonstrates using a RadDatePicker, ValidatorCalloutExtender and CalendarExtender on the same page, however the RadDatePicker works as expected. Please check the example and let me know what differs in your case.

Looking forward for your reply.

Greetings,
Radoslav
the Telerik team