DatePopupButton Images

[Michael]

Hi

I'm using the RadDatePicker with custom CSS applied. I can control all of the images and formatting via the style sheet but can't see any way to to control the location of the image used for the DatePopupButton ImageUrl and HoverImageUrl. Is there a way to specify where these images are located or do I need to specify this everytime I place the control?

Thanks.

Michael

[Dimo]

Hi Michael,

There are two ways to tell RadDatePicker where its popup button images are located:

1) Use the ImagePath property. In this case the names of the image files must be:

datePickerPopup.gif
datePickerPopupHover.gif

If you set ImagesPath, it will be used also by the RadCalendar control to locate the images for its titlebar image buttons (previous month, next month, etc.) :

arrowLeft.gif
arrowRight.gif
fastNavLeft.gif
fastNavRight.gif


2) define the URL of every button separately. In this case the names can be whatever you like.


Both techniques can be implemented by using ASP.NET themes.


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

Hi Dimo

Thanks for your reply.

This is the markup I'm using. I have set the ImagesPath property to the location of the .gif files. Yet when displayed in the designer or at runtime, a red cross is displayed instead of the pop up button graphic. Have I missed something?

Thanks.

Michael

<telerik:RadDatePicker ID="fdDOB" Runat="server" Height="24px" Width="119px" Skin="Normal" ImagesPath="~/StyleSheets/Telerik/Calendar/" Culture="English (United Kingdom)" EnableEmbeddedSkins="False">
    <DateInput runat="server" Height="24px" LabelCssClass="radLabelCss_Normal" Skin="Normal" EnableEmbeddedSkins="False"></DateInput>
    <Calendar runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x" Skin="Normal" ImagesPath="~/StyleSheets/Telerik/Calendar/" EnableEmbeddedSkins="False"></Calendar>
    <DatePopupButton HoverImageUrl="datePickerPopupHover.gif" ImageUrl="datePickerPopup.gif" />
</telerik:RadDatePicker>

[Dimo]

Hello Michael,

Please remove

<DatePopupButton HoverImageUrl="datePickerPopupHover.gif" ImageUrl="datePickerPopup.gif" />

You don't need those when ImagesPath is set.

In addition, there is no need to repeat the same settings in all the picker's child controls. This is enough:


<telerik:RadDatePicker
    ID="fdDOB"
    runat="server"
    Height="24px"
    Width="119px"
    EnableEmbeddedSkins="False"
    Skin="Normal"
    ImagesPath="~/StyleSheets/Telerik/Calendar/"
    Culture="English (United Kingdom)">
    <Calendar
        UseColumnHeadersAsSelectors="False"
        UseRowHeadersAsSelectors="False"
        ViewSelectorText="x" />
</telerik:RadDatePicker>



Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

Works fine.

Many thanks,
Michael

[Michael]

Works fine.

Many thanks,
Michael