Clear Command in Picker Popup.

[Ion]

Hello Telerik Team,

I know there is a command, ClearCommand from the RadPickerBase, which could be used in order to clear out the picker's value. But I need to be able to clear the picker value from inside the selector Popup. Can you help me with this?

This is my datePicker declaration:

<telerik:RadDateTimePicker SelectedDate="{Binding Value}">
  <telerik:RadDateTimePicker.SelectorSettings>
    <telerik:PickerPopupSelectorSettings FooterTemplate="{StaticResource PickerFooterTemplate}" />
  </telerik:RadDateTimePicker.SelectorSettings>
</telerik:RadDateTimePicker>

And this is an attempt to get the Clear command from the datePicker:

 

 

 

 

01.<ControlTemplate x:Key="PickerFooterTemplate">
02.  <StackLayout Orientation="Horizontal"
03.      Spacing="0"
04.      HorizontalOptions="FillAndExpand"
05.      BackgroundColor="{StaticResource SecondaryButtonColor}">
06.    <Button Text="Clear"
07.      TextColor="{StaticResource TextColor}"
08.      BackgroundColor="Transparent"
09.   -->Command="{Binding Source={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadDateTimePicker}, AncestorLevel=1}, Path=ClearCommand}" />
10.    <Button Text="{TemplateBinding AcceptButtonText}"
11.      TextColor="{StaticResource TextColor}"
12.      BackgroundColor="Transparent"
13.      Command="{TemplateBinding AcceptCommand}" />
14.    <Button Text="{TemplateBinding CancelButtonText}"
15.      TextColor="{StaticResource TextColor}"
16.      BackgroundColor="Transparent"
17.      Command="{TemplateBinding CancelCommand}" />
18.  </StackLayout>
19.</ControlTemplate>




[Didi]

Hello Ion,

Thank you for the provided code and image. 

In order to clear the selection you can use one of the following approaches:

DateTimePicker definition:

<telerikInput:RadDateTimePicker Date="{Binding Value}" x:Name="picker">
    <telerikInput:RadDateTimePicker.SelectorSettings>
        <telerikInput:PickerPopupSelectorSettings FooterTemplate="{StaticResource PickerFooterTemplate}" />
    </telerikInput:RadDateTimePicker.SelectorSettings>
</telerikInput:RadDateTimePicker>

1) ClearSelection method:

<ControlTemplate x:Key="PickerFooterTemplate">
    <StackLayout Orientation="Horizontal"
                    Spacing="0"
                    HorizontalOptions="FillAndExpand">
        <Button Text="Clear"
                BackgroundColor="Transparent"
                Clicked="Button_Clicked"/>

        <Button Text="{TemplateBinding AcceptButtonText}"
                    BackgroundColor="Transparent"
                    Command="{TemplateBinding AcceptCommand}" />
        <Button Text="{TemplateBinding CancelButtonText}"
                BackgroundColor="Transparent"
                Command="{TemplateBinding CancelCommand}" />
    </StackLayout>
</ControlTemplate>

and call clearselection method inside the button click event. Clear selection clears the current selection.

private void Button_Clicked(object sender, EventArgs e)
{
    this.picker.ClearSelection();
}

2) Clear command:

<ControlTemplate x:Key="PickerFooterTemplate">
    <StackLayout Orientation="Horizontal"
                    Spacing="0"
                    HorizontalOptions="FillAndExpand">
        <Button Text="Clear"
                BackgroundColor="Transparent"
                Command="{Binding Source={x:Reference picker}, Path=ClearCommand}"/>

        <Button Text="{TemplateBinding AcceptButtonText}"
                    BackgroundColor="Transparent"
                    Command="{TemplateBinding AcceptCommand}" />
        <Button Text="{TemplateBinding CancelButtonText}"
                BackgroundColor="Transparent"
                Command="{TemplateBinding CancelCommand}" />
    </StackLayout>
</ControlTemplate>

Note that the method and the command are used to clear the current selection, in cases when the spinner value is changed the clear selection clears the selection and default date is displayed in the tabs. 

Also when date/time is picker and you open the popup and press the clear button, the method/command will clear the date/time displayed in the picker. Please Check the attached gif.

I hope the provided information was helpful.

Regards,
Didi
Progress Telerik

[Ion]

Thank you, Didi.

I knew it is possible to get the reference by name, but in my specific case I cannot use it.
Is it possible to use RelativeSource by any chances to get the ClearCommand?

PS: The clear button can be moved outside the FooterTemplate.

[Didi]

Hi Ion, 

I am afraid the scenario with relative binding could not be achieved. The reason behind this is that the popup (which visualized when the picket is open is placed ) is located in a different visual tree or in a different place in the same tree.

The options you can use are the ones I have provided in my previous reply.

Regards,
Didi
Progress Telerik