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

Clear Command in Picker Popup.

3 Answers 75 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Ion
Top achievements
Rank 1
Ion asked on 15 May 2020, 08:42 PM

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>

3 Answers, 1 is accepted

Sort by
0
Accepted
Didi
Telerik team
answered on 18 May 2020, 08:59 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ion
Top achievements
Rank 1
answered on 19 May 2020, 02:15 PM
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.
0
Didi
Telerik team
answered on 20 May 2020, 08:40 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
DateTimePicker
Asked by
Ion
Top achievements
Rank 1
Answers by
Didi
Telerik team
Ion
Top achievements
Rank 1
Share this question
or