using rad datepicker in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

using rad datepicker

7 Answers 59 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 03 Nov 2010, 01:50 PM

calender.JPG

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.

answered on 08 Nov 2010, 09:51 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 08 Nov 2010, 12:24 PM

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...

<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>

<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...

answered on 08 Nov 2010, 04:29 PM

radcontrolswebsite1.zip

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

answered on 12 Nov 2010, 03:00 PM

radcontrolswebsite1.zip

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