This is a migrated thread and some comments may be shown as answers.

How to disable user input

3 Answers 146 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Luis
Top achievements
Rank 1
Luis asked on 17 Oct 2018, 03:57 PM
None of the solutions presented in the following threads works:

https://www.telerik.com/forums/how-to-disable-the-user-input

https://www.telerik.com/forums/disable-input-field-force-user-choose-date-by-click-on-calendar

https://www.telerik.com/forums/how-to-disable-input

The objective in unable the user to type a text and allow him to choose a date only by clicking button.

3 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 22 Oct 2018, 09:00 AM
Hello Luis,

Can you please elaborate a bit more on your scenario? What do you mean by saying that you want the user to be able to select a date only by clicking a button? Is this some external button - defined separatly (for example RadButton)?  Or do you mean the calendar buttons (the days in the calendar)?

If you want to restrict only the text entering in the input field, you can get the RadWatermarkTextBox from the RadDatePicker's visual tree, using the visual tree helper methods. And then set its IsEnabled property to False. Here is an example in code:
private void DatePicker_Loaded(object sender, RoutedEventArgs e)
{
    var inputBox = this.datePicker.FindChildByType<RadWatermarkTextBox>();
    inputBox.WatermarkContent = "Select a date";
    inputBox.IsEnabled = false;
}

If you want to disable the calendar part you can set the IsEnabled property of the RadCalendar control via the CalendarStyle property of the RadDatePicker control.
<telerik:RadDatePicker.CalendarStyle>
    <Style TargetType="telerik:RadCalendar">
        <Setter Property="IsEnabled" Value="False" />
    </Style>
</telerik:RadDatePicker.CalendarStyle>

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Luis
Top achievements
Rank 1
answered on 22 Oct 2018, 01:34 PM

Dear Ivanov,

My scenario is that I have a RadDatePicker inside a RadGridView. I want all my RadDatePickers to allow user to choose a date only from the calendar by clicking the button which pops up the calendar. As you mentioned I want to restrict only the text entering in the input field.

I hope my snippet code is sufficient to clarify my issue.

*Also*, I would like to present the date as "MM/yyyy" which I haven't managed to do yet, if you could help with it as well I would appreciate it.
Thanks in advance.

 

<Style x:Key="StandardRadGridViewStyle" TargetType="telerik:RadGridView">
    <!--  general properties  -->
    <Setter Property="IsFilteringAllowed" Value="False" />
    <Setter Property="AutoGenerateColumns" Value="False" />
    <Setter Property="ShowGroupPanel" Value="False" />
    <Setter Property="VirtualizingPanel.IsVirtualizing" Value="True" />
    <Setter Property="RowIndicatorVisibility" Value="Collapsed" />
    <Setter Property="RowDetailsVisibilityMode" Value="Collapsed" />
    <Setter Property="SelectionMode" Value="Single" />
 
    <!--  user permitions  -->
    <Setter Property="CanUserDeleteRows" Value="False" />
    <Setter Property="CanUserFreezeColumns" Value="False" />
    <Setter Property="CanUserInsertRows" Value="False" />
    <Setter Property="CanUserResizeColumns" Value="False" />
    <Setter Property="CanUserResizeRows" Value="False" />
    <Setter Property="CanUserSearch" Value="False" />
    <Setter Property="CanUserSearchInHiddenColumns" Value="False" />
    <Setter Property="CanUserSortColumns" Value="False" />
    <Setter Property="CanUserSortGroups" Value="False" />
    <Setter Property="CanUserReorderColumns" Value="False" />
 
    <!--  look and feel  -->
    <Setter Property="Background" Value="#1a1e29" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="GridLinesVisibility" Value="None" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="AlternationCount" Value="2" />
</Style>
 
<Style x:Key="StandardInputControlStyle" TargetType="FrameworkElement">
    <Setter Property="Margin" Value="5,0,0,5" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Control.VerticalContentAlignment" Value="Center" />
    <Setter Property="Height" Value="20" />
    <Setter Property="Control.FontFamily" Value="Open Sans" />
    <Setter Property="Control.FontSize" Value="10pt" />
    <Setter Property="Control.Foreground" Value="White" />
    <Setter Property="Control.Background" Value="#363c4e" />
    <Setter Property="Control.FontWeight" Value="Regular" />
    <Setter Property="Control.BorderThickness" Value="0" />
    <Setter Property="Control.Padding" Value="4,0,0,0" />
</Style>
 
<Style
    x:Key="RadDatePickerStyle"
    BasedOn="{StaticResource StandardInputControlStyle}"
    TargetType="telerik:RadDatePicker">
    <Setter Property="Width" Value="80" />
    <Setter Property="Height" Value="20" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="TextAlignment" Value="Right" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Background" Value="Orange" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Margin" Value="5,4,0,5" />
    <Setter Property="Padding" Value="0,0,2,0" />
    <Setter Property="Culture" Value="pt-BR" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="DateSelectionMode" Value="Month" />
</Style>
 
<Style
    x:Key="RadDatePickerForRadGridColumnStyle"
    BasedOn="{StaticResource RadDatePickerStyle}"
    TargetType="telerik:RadDatePicker">
    <Setter Property="Height" Value="Auto" />
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="0" />
</Style>
 
<telerik:RadGridView
    x:Name="radGridView"
    ItemsSource="{Binding MyObjectList}"
    LayoutUpdated="radGridView_LayoutUpdated"
    Style="{StaticResource StandardRadGridViewStyle}">
    <telerik:RadGridView.Columns>
     
     <telerik:GridViewDataColumn
            Width="70"
            DataMemberBinding="{Binding ExpirationDate, Mode=TwoWay}"
            Header="Validade"
            IsReadOnly="False"
            Style="{StaticResource GridViewDataColumnStyle}">
            <telerik:GridViewDataColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ExpirationDateToString}" TextAlignment="Right" />
                </DataTemplate>
            </telerik:GridViewDataColumn.CellTemplate>
            <telerik:GridViewDataColumn.CellEditTemplate>
                <DataTemplate>
                    <telerik:RadDatePicker
                        DisplayDateStart="{Binding StartDate, Mode=OneWay}"
                        SelectedDate="{Binding ExpirationDate, Mode=TwoWay}"
                        Style="{StaticResource RadDatePickerForRadGridColumnStyle}" />
                </DataTemplate>
            </telerik:GridViewDataColumn.CellEditTemplate>
        </telerik:GridViewDataColumn>
         
         </telerik:RadGridView.Columns>
</telerik:RadGridView>
public class ViewModel
{
    [...]
    public ObservableCollection<MyObject> MyObjectList
    {
        get
        {
            return myObjectList;
        }
 
        set
        {
            myObjectList = value;
            OnPropertyChanged(nameof(MyObjectList));
        }
    }
    [...]
}
 
public class OptionStructureModel : INotifyPropertyChanged
{
    private DateTime? startDate = DateTime.Today;
    private DateTime expirationDate = DateTime.Today;
     
    public DateTime? StartDate
    {
        get
        {
            return startDate;
        }
        set
        {
            startDate = value;
            OnPropertyChanged(nameof(StartDate));
        }
    }
 
    public string ExpirationDateToString
    {
        get
        {
            string val = expirationDate.ToString("MM/yyyy");
            return val;
        }
    }
 
    public string ExpirationDate
    {
        get
        {
            string val = expirationDate.ToString("MM/yyyy");
            return val;
        }
        set
        {
            DateTime date = DateTimeForOptionHandler.GetValidDateTime(value);
            string val = date.ToString("MM/yyyy");
            if (val != expirationDate.ToString("MM/yyyy"))
            {
                expirationDate = date;
            }
            OnPropertyChanged(nameof(ExpirationDate));
        }
    }
}
0
Dilyan Traykov
Telerik team
answered on 25 Oct 2018, 10:42 AM
Hello Luis,

I've prepared a small sample project based on the code you provided to demonstrate how you can achieve the desired result by handling the PreparingCellForEdit event of the RadGridView control.

Inside the handler you can set a custom format for the date as well as cancel any user input by handling the RadDatePicker's PreviewTextInput event.

private void radGridView_PreparingCellForEdit(object sender, GridViewPreparingCellForEditEventArgs e)
{
    var picker = e.EditingElement as RadDatePicker;
    if (picker != null)
    {
        picker.PreviewTextInput += Picker_PreviewTextInput;
        picker.DisplayFormat = DateTimePickerFormat.Long;
        picker.Culture.DateTimeFormat.ShortDatePattern = "MM/yyyy";
        picker.DisplayFormat = DateTimePickerFormat.Short;
    }
}
 
private void Picker_PreviewTextInput(object sender, TextCompositionEventArgs e)
{
    e.Handled = true;
}

Please have a look at the attached project and let me know if it provides the desired result or if I've misunderstood your requirement in any way. I look forward to your reply.

Regards,
Dilyan Traykov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DatePicker
Asked by
Luis
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Luis
Top achievements
Rank 1
Dilyan Traykov
Telerik team
Share this question
or