Only able to set Date by the picker

5 posts, 1 answers
  1. Kevin Hendriks
    Kevin Hendriks avatar
    56 posts
    Member since:
    Feb 2009

    Posted 21 Jan 2011 Link to this post

    I want the user to only be able to set the data by clicking on the calander itself and the textbox that displays the text to be readonly.

    If I set the control to IsReadOnly then  the whole onctrol does not set the data so that will not work. I also could not find a property with wich I can set this behavior.
  2. Answer
    Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 21 Jan 2011 Link to this post

    Hi Kevin Hendriks,

    You have to modify the template of the control and set the WaterMarkedTextBox to a readonly:

    <Style x:Key="RadDateTimePickerStyle1" TargetType="{x:Type telerik:RadDateTimePicker}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="KeyboardNavigation.TabNavigation" Value="Once" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="TooltipTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border BorderBrush="#FF848484" BorderThickness="1" CornerRadius="2" Margin="0,2">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="#FFDEDEDE" Offset="1" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="1">
                            <ContentControl Content="{Binding}" Foreground="Black" Margin="5,2" />
                        </Border>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="White" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" Value="#FF848484" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="FontStyle" Value="Normal" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="MinHeight" Value="22" />
        <Setter Property="Padding" Value="4,2" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="DateTimeWatermarkTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock Opacity="0.5" Text="{Binding}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadDateTimePicker}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Border x:Name="BackgroundVisual" BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}" Grid.ColumnSpan="2"
                                CornerRadius="1" />
                        <Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B"
                                BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"
                                CornerRadius="1" IsHitTestVisible="False" Opacity="0"
                                Visibility="Collapsed" />
                        <telerik:RadWatermarkTextBox x:Name="PART_DateTimeInput" BorderBrush="{x:Null}"
                                BorderThickness="0" Background="{x:Null}" Grid.Column="0"
                                CurrentText="{Binding CurrentDateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Margin="{TemplateBinding BorderThickness}" MinHeight="0"
                                Padding="{TemplateBinding Padding}" SelectionOnFocus="SelectAll"
                                TextAlignment="{TemplateBinding TextAlignment}"
                                Text="{Binding DateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                TabIndex="0" VerticalAlignment="Stretch"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                WatermarkTemplate="{TemplateBinding DateTimeWatermarkTemplate}"
                                WatermarkContent="{TemplateBinding DateTimeWatermarkContent}"
                                IsReadOnly="True">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme />
                            </telerik:StyleManager.Theme>
                        </telerik:RadWatermarkTextBox>
                        <Border x:Name="FocusVisual" BorderBrush="#FFFFC92B"
                                BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"
                                CornerRadius="1" IsHitTestVisible="False" Visibility="Collapsed">
                            <Border BorderBrush="Transparent"
                                    BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" />
                        </Border>
                        <telerik:RadDropDownButton x:Name="PART_DropDownButton" CloseOnEnter="True"
                                Grid.Column="1" DropDownIndicatorVisibility="Collapsed"
                                Focusable="False"
                                telerik:DateTimePickerExtensions.FocusContentOnOpen="True"
                                HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
                                IsTabStop="False"
                                IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                Margin="-1,0,0,0" Padding="0"
                                PopupPlacementTarget="{Binding ElementName=PART_DateTimeInput}"
                                TabIndex="1" VerticalAlignment="Stretch"
                                VerticalContentAlignment="Stretch">
                            <telerik:RadDropDownButton.DropDownContent>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <telerik:RadCalendar x:Name="PART_Calendar"
                                            Culture="{TemplateBinding Culture}" Grid.Column="0"
                                            DisplayDateEnd="{Binding DisplayDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            DateSelectionMode="{TemplateBinding DateSelectionMode}"
                                            DisplayDateStart="{Binding DisplayDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            DisplayDate="{Binding DisplayDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            IsReadOnly="{TemplateBinding IsReadOnly}" Grid.Row="0"
                                            Style="{TemplateBinding CalendarStyle}"
                                            SelectableDateEnd="{Binding SelectableDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            SelectionMode="Single"
                                            SelectedDate="{Binding SelectedDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            SelectableDateStart="{Binding SelectableDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme />
                                        </telerik:StyleManager.Theme>
                                    </telerik:RadCalendar>
                                    <telerik:DateTimePickerClock x:Name="PART_Clock"
                                            Culture="{TemplateBinding Culture}" Grid.Column="1"
                                            EndTime="{TemplateBinding EndTime}" Header="Clock"
                                            IsReadOnly="{TemplateBinding IsReadOnly}" Grid.Row="0"
                                            Style="{TemplateBinding ClockStyle}"
                                            SelectedTime="{Binding SelectedTime, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            StartTime="{TemplateBinding StartTime}"
                                            TimeInterval="{Binding TimeInterval, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme />
                                        </telerik:StyleManager.Theme>
                                    </telerik:DateTimePickerClock>
                                    <Border x:Name="CloseButtonContainer" BorderBrush="#FF848484"
                                            BorderThickness="1,0,1,1" Background="White"
                                            Grid.ColumnSpan="2" Grid.Row="1">
                                        <Border BorderBrush="Transparent" BorderThickness="1,0,1,1">
                                            <telerik:RadToggleButton x:Name="PART_Close" Content="Close"
                                                    HorizontalAlignment="Right" IsThreeState="False"
                                                    IsBackgroundVisible="False"
                                                    IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                    Margin="2" Padding="8,3">
                                                <telerik:RadToggleButton.Style>
                                                    <Style TargetType="{x:Type telerik:RadToggleButton}">
                                                        <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate
                                                                        TargetType="{x:Type telerik:RadToggleButton}">
                                                                    <Grid>
                                                                        <Telerik_Windows_Controls_Chromes:ButtonChrome
                                                                                RenderNormal="False"
                                                                                RenderMouseOver="{TemplateBinding IsMouseOver}"
                                                                                RenderPressed="{TemplateBinding IsPressed}">
                                                                            <telerik:StyleManager.Theme>
                                                                                <telerik:Office_BlackTheme />
                                                                            </telerik:StyleManager.Theme>
                                                                        </Telerik_Windows_Controls_Chromes:ButtonChrome>
                                                                        <ContentPresenter
                                                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                                Content="{TemplateBinding Content}"
                                                                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                                                Margin="{TemplateBinding Padding}" />
                                                                    </Grid>
                                                                </ControlTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                    </Style>
                                                </telerik:RadToggleButton.Style>
                                            </telerik:RadToggleButton>
                                        </Border>
                                    </Border>
                                </Grid>
                            </telerik:RadDropDownButton.DropDownContent>
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme />
                            </telerik:StyleManager.Theme>
                            <telerik:RadDropDownButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:RadDropDownButton}">
                                    <Grid>
                                        <ContentPresenter
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                Content="{TemplateBinding Content}"
                                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                Margin="{TemplateBinding Padding}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                        <Popup x:Name="DropDownPopup" AllowsTransparency="True"
                                                Focusable="False"
                                                IsOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                                Placement="Bottom" StaysOpen="False">
                                            <ContentPresenter x:Name="DropDownPopupContent"
                                                    ContentTemplate="{TemplateBinding DropDownContentTemplate}"
                                                    Content="{TemplateBinding DropDownContent}" />
                                        </Popup>
                                    </Grid>
                                </ControlTemplate>
                            </telerik:RadDropDownButton.Template>
                            <Grid>
                                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonChrome"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        CornerRadius="0,1,1,0"
                                        RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                                        RenderFocused="{TemplateBinding IsKeyboardFocusWithin}"
                                        RenderActive="{TemplateBinding IsMouseOver}"
                                        RenderEnabled="{TemplateBinding IsEnabled}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme />
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Chromes:ButtonChrome>
                                <ContentControl x:Name="DropDownIcon" Background="White"
                                        Foreground="Black" IsTabStop="False" Margin="4,0">
                                    <ContentControl.Template>
                                        <ControlTemplate TargetType="{x:Type ContentControl}">
                                            <Grid>
                                                <Path x:Name="CalendarIconBackground"
                                                        Data="M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
                                                        Height="7" Margin="0,1,0,0"
                                                        Stroke="{TemplateBinding Background}" Width="7" />
                                                <Path x:Name="CalendarIconForeground"
                                                        Data="M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
                                                        Height="7" Margin="0,0,0,1"
                                                        Stroke="{TemplateBinding Foreground}" Width="7" />
                                            </Grid>
                                        </ControlTemplate>
                                    </ContentControl.Template>
                                </ContentControl>
                            </Grid>
                        </telerik:RadDropDownButton>
                        <Popup x:Name="PART_InputPopup" AllowsTransparency="True"
                                telerik:PopupExtensions.IsOpen="{Binding IsTooltipOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                telerik:PopupExtensions.Owner="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                Placement="Top" telerik:PopupExtensions.Placement="Top"
                                telerik:PopupExtensions.PlacementTarget="{Binding ElementName=PART_DateTimeInput}"
                                StaysOpen="False">
                            <ContentPresenter ContentTemplate="{TemplateBinding TooltipTemplate}"
                                    Content="{TemplateBinding TooltipContent}" />
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Opacity"
                                                Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Visibility"
                                                Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Opacity"
                                                Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Visibility"
                                                Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.15">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black" />
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White" />
                        </MultiTrigger>
                        <Trigger Property="IsDropDownOpen" Value="True">
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black" />
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="BorderBrush" TargetName="BackgroundVisual"
                                    Value="#FF989898" />
                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="0" />
                            <Setter Property="Visibility" TargetName="MouseOverVisual" Value="Collapsed" />
                            <Setter Property="Foreground" TargetName="PART_DateTimeInput"
                                    Value="#FF8D8D8D" />
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="#FF8D8D8D" />
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White" />
                        </Trigger>
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible" />
                        </Trigger>
                        <Trigger Property="InputMode" Value="DatePicker">
                            <Setter Property="Visibility" TargetName="PART_Clock" Value="Collapsed" />
                            <Setter Property="Visibility" TargetName="CloseButtonContainer"
                                    Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="InputMode" Value="TimePicker">
                            <Setter Property="Visibility" TargetName="PART_Calendar" Value="Collapsed" />
                            <Setter Property="Visibility" TargetName="CloseButtonContainer"
                                    Value="Collapsed" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    Greetings,
    Kaloyan
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Mark
    Mark avatar
    15 posts
    Member since:
    Apr 2012

    Posted 08 Jan 2013 Link to this post

    I have the same problem as Kevin.  Is Kaloyan's 1/21/2011 solution still the only solution for this problem?

    Update: I just tried Kaloyan's solution. It prevents the user from entering text into the input box.  But it also prevents the selected date from the drop down calendar from being saved in SelectedValue which is what I want. 
  5. Alek
    Admin
    Alek avatar
    78 posts

    Posted 11 Jan 2013 Link to this post

    Hi Mark,

    You can edit the control template using the Implicit Styles too.

    You can find two projects attached using both approaches - Kaloyan's (which you've already tried) and with Implicit Styles. In both the selected date chosen from the drop down menu is correctly saved in the SelectedValue property. 

    Please, take a look over the examples and the attached video in case we've missed something important.

    All the best,
    Alek
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Mark
    Mark avatar
    15 posts
    Member since:
    Apr 2012

    Posted 13 Jan 2013 Link to this post

    Thank you Alex. Both solutions in your example work.  

    I see now why Kaloyan's solution did not work for me.  It references some namespaces that I did not define with xmlns:  
Back to Top
UI for WPF is Visual Studio 2017 Ready