DatePicker Opacity question

[Jarrod]

Hi There,

I am using the RadDatePicker control to set the date on a column in a RadGridView. The problem I am having is that the control is displaying as transparent, which makes the control hard to use. I have changed the opacity to 100 but it doesn't seem to make a difference.

I am using the transparent theme for the grid. Is there a way for me to set the opacity of the date control separately? Sorry this is probably a very obvious thing, but I am rather new to Silverlight. I have included a sample of the xaml below.

Thanks and Regards, J

                        <telerik:GridViewDataColumn DataMemberBinding="{Binding EstimatedCloseDate}" Header="Estimated Close Date" TextAlignment="Center" >
                            <telerik:GridViewDataColumn.CellEditTemplate>
                                <DataTemplate>
                                    <telerik:RadDatePicker SelectedDate="{Binding EstimatedCloseDate, Mode=TwoWay}" Background="Black" Opacity="100" />
                                </DataTemplate>
                            </telerik:GridViewDataColumn.CellEditTemplate>
                        </telerik:GridViewDataColumn>

Thanks and Regards, J

[Yana]

Hi Jarrod,

You should set opacity to the calendar in your RadDatePicker, this can be achieved with CalendarStyle property like this:

- create the style:

Copy Code

Copy Code

Copy Code

<UserControl.Resources>
    <Style x:Name="calStyle" TargetType="Control">
        <Setter Property="Opacity" Value="100"  />
    </Style>
</UserControl.Resources>

and set it to CalendarStyle:

Copy Code

Copy Code

Copy Code

<telerik:GridViewDataColumn.CellEditTemplate>

    <DataTemplate>

        <telerik:RadDatePicker Background="Black"  Opacity="100" CalendarStyle="{StaticResource calStyle}" />

    </DataTemplate>

</telerik:GridViewDataColumn.CellEditTemplate>

Hope this helps.

Greetings,
Yana
the Telerik team

[Jarrod]

Hi Yana,

I have tried this but it has not made a difference. Please see inset code.

<Style x:Name="calendarStyle" TargetType="Control">
    <Setter Property="Opacity" Value="100"/>
</Style>

and 

<telerik:GridViewDataColumn DataMemberBinding="{Binding EstimatedCloseDate}" Header="Estimated Close Date" TextAlignment="Center" DataFormatString="{} {0:dd, MMM, yyyy}">
    <telerik:GridViewDataColumn.CellEditTemplate>
        <DataTemplate>
            <telerik:RadDatePicker SelectedDate="{Binding EstimatedCloseDate, Mode=TwoWay}" CalendarStyle="{StaticResource calendarStyle}" />
        </DataTemplate>
    </telerik:GridViewDataColumn.CellEditTemplate>
</telerik:GridViewDataColumn>

It is still transparent. Please see an example attached.

[Yana]

Hi Jarrod,

I've tested the approach and it worked as expected at our side,  you can find attached my test files, please download the attachment and give it a try.

Kind regards,
Yana
the Telerik team

[Mark]

Jarrod,

I was just chasing down the same issue in WPF and the provided code did not solve the issue for me either. What ended up working for me was, in the 'calStyle' styling block, to set the background colour. In my case I set it to 'silver' and the calendar became opaque. (see attachments).

Cheers,
Mark.

[Kelly]

I too have tried the code above and in the zip file with no result. I'm using a RadDateTimePicker with the Transparent theme on 2011.3.1227.1040. I set both the CalendarStyle and the ClockStyle using various values, and don't see any difference. The picker opens over a very busy GridView and is pretty much unreadable. As Mark noted, it works if you also set the background, but I don't want to set the background, or I wouldn't have used the transparent style. Is there something else to try to just set the Opacity?

Thank you,

Kelly

[Yana]

Hi Kelly,

I've tested the project with the latest release and it works without a problem.  Please open a support ticket and send us a simplified version of your project where we can observe the issue. Thanks in advance

Greetings,
Yana
the Telerik team

[Kelly]

Yana, I submitted a project under ticket id 507961. Thanks!

[Yana]

Hello Kelly,

I've checked the project and you are right - really setting Opacity is not enough to fix the issue with the DatePicker, you should set Background as well.

Greetings,
Yana
the Telerik team

[Mike Lee]

Hi guys, wouldn't it be better if we implement implicit styling on the datepicker, instead of having to put a CalendarStyle for every datepicker we use?

This solution is actually a hybrid of using explicit and implicit styling:

This is the explicit style for the CalendarStyle:
    <Style x:Name="CalPickerStyle" TargetType="Control">
        <Setter Property="Opacity" Value="100"/>
        <Setter Property="Background" Value="Silver" />
    </Style>

Implicit style for RadDatePicker:

    <Style TargetType="telerik:RadDatePicker">
        <Setter Property="CalendarStyle" Value="{StaticResource CalPickerStyle}"/>
    </Style>


This is also a problem with Transparent Comboboxes, so the same approach:

    <Style x:Name="ComboDropStyle" TargetType="Control">
        <Setter Property="Opacity" Value="100"/>
        <Setter Property="Background" Value="White" />
    </Style>

    <Style TargetType="telerik:RadComboBox">
        <Setter Property="ItemContainerStyle" Value="{StaticResource ComboDropStyle}"/>
    </Style>

Hope this helps some of you.  I know it saved me time of not having to edit 100+ pages that use Comboboxes and DatePickers!

Mike Lee
http://www.eikospartners.com

[Yana]

Hello Mike,

Since Q1 SP1 release you can use implicit styles to style our controls. More information about this you can find here.

Greetings,
Yana
the Telerik team

[Cheri]

Hello,

Recently I used Mike's approach to set the background on my datepicker.  Since I've upgraded to 2012.3.1106.1050 this no longer works.  the background is transparent again.

What should I do to fix this?

Thanks,
Cheri

[Yana]

Hello Cheri,

We have tried to reproduce the issue but without much success. I have attached our test project for a reference. Note that when using implicit styles and customize some properties of the controls,  you should base the new styles on the default values. Also make sure to reference the NoXaml assemblies.

Kind regards,
Yana
the Telerik team