How to disable user input

[Luis]

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.

[Martin Ivanov]

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

[Luis]

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));
        }
    }
}

[Dilyan Traykov]

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