[Solved] Styling Calendars w/ in RadGrid

[Michael]

Hi all ... This is my first post...

Although I am very fluent in CSS ... I have just started using RadControls and am having a lot of trouble wrestling control of the look and feel away from a RadGrid and into CSS

The first thing that I did was to set EnableEmbeddedSkins="false" which accomplished the reset that I was looking for...

I then began adding my own style based on the classes for things like .rgPagePrev, .rgPageNext, and .rgFilter

My problem is that when AllowFilteringByColumn is set to True and a column is of DateTime type, RadGrid is smart enough to add a Calendar selector to the filter ... However, it does not give me a simple class to change the calendar icon, etc etc and its making a big mess out of the page

Can anyone offer me some suggestions or a solution?

Thanks in advance...


-Mike

[Dimo]

Hello Michael,

Thank you for your interest in RadControls for ASP.NET AJAX.

Currently, RadDateTimePicker and RadCalendar use <img /> elements for their buttons, as you have already observed. These will be replaced by CSS backgrounds in the next major version when the HTML rendering and CSS skinning will be optimized (the ability to work with <img /> elements will be preserved for backwards compatibility).

In the meantime, here is how to set custom image buttons for a RadDateTimePicker and RadCalendar, which are inside a RadGrid filter row. I will use this example as a starting point:

RadGrid Filtering Online Demo


Markup:

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Skin="Custom"
    EnableEmbeddedSkins="false"
    OnItemCreated="RadGrid1_ItemCreated" />

C# :

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filteringItem = e.Item as GridFilteringItem;

        RadDatePicker ShippedDatePicker = filteringItem["ShippedDate"].Controls[0] as RadDatePicker;
        ShippedDatePicker.ImagesPath = "~/CalendarImagesFolder/";
    }
}

Afterwards, you should place all relevant images for the Picker and Calendar controls in the folder specified by the ImagesPath property. The names of the images should be as follows:

datePickerPopup.gif
datePickerPopupHover.gif
clock.gif
clockHover.gif

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



Of course, as long as you have the instance of the picker available, you can set each image's url separately, but this is in my opinion clumsier, compared to using ImagesPath:

C# :

ShippedDatePicker.DatePopupButton.ImageUrl = "....";
ShippedDatePicker.DatePopupButton.HoverImageUrl = "....";

ShippedDatePicker.Calendar.NavigationPrevImage = "...";
ShippedDatePicker.Calendar.NavigationNextImage = "...";
ShippedDatePicker.Calendar.FastNavigationPrevImage = "...";
ShippedDatePicker.Calendar.FastNavigationNextImage = "...";

I hope this throws enough light on the matter. Let us know if you need more information.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center