Kevin Hendriks
Top achievements
Rank 1
Kevin Hendriks
asked on 21 Jan 2011, 11:05 AM
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.
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.
4 Answers, 1 is accepted
0
Accepted
Hi Kevin Hendriks,
You have to modify the template of the control and set the WaterMarkedTextBox to a readonly:
Greetings,
Kaloyan
the Telerik team
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>>
0
Mark
Top achievements
Rank 1
answered on 08 Jan 2013, 07:11 PM
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.
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.
0
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
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.
0
Mark
Top achievements
Rank 1
answered on 13 Jan 2013, 05:39 PM
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:
I see now why Kaloyan's solution did not work for me. It references some namespaces that I did not define with xmlns: