DatePicker Opacity question

13 posts, 1 answers
  1. Jarrod
    Jarrod avatar
    15 posts
    Member since:
    Jan 2011

    Posted 01 Mar 2011 Link to this post

    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
    
    
    
    
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 03 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Jarrod
    Jarrod avatar
    15 posts
    Member since:
    Jan 2011

    Posted 03 Mar 2011 Link to this post

    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.
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 07 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Mark
    Mark avatar
    1 posts
    Member since:
    Oct 2011

    Posted 19 Oct 2011 Link to this post

    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.
  7. Kelly
    Kelly avatar
    73 posts
    Member since:
    Apr 2011

    Posted 30 Jan 2012 Link to this post

    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
  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 02 Feb 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  9. Kelly
    Kelly avatar
    73 posts
    Member since:
    Apr 2011

    Posted 02 Feb 2012 Link to this post

    Yana, I submitted a project under ticket id 507961. Thanks!
  10. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 03 Feb 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  11. Mike Lee
    Mike Lee avatar
    11 posts
    Member since:
    Jan 2010

    Posted 23 Aug 2012 Link to this post

    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
  12. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 24 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  13. Cheri
    Cheri avatar
    21 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2012 Link to this post

    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
  14. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner