TimePicker - Clear Button

[AdrianG]

Hi

For the TimePicker editor is there a 'Clear' button or can one be added (similar to that available with the DateTimePicker)?

Thanks

Adrian

[Dimitar]

Hello Adrian,

Thank you for writing back.

There is no such button out of the box for the time picker, but such can be easily added to it. You just nee to create a button and add it to a footer panel of the popup:

public Form1()
{
    InitializeComponent();

    RadButtonElement clearButton = new RadButtonElement("Clear");
    clearButton.StretchHorizontally = false;
    clearButton.Alignment = ContentAlignment.MiddleRight;
    clearButton.Margin = new System.Windows.Forms.Padding(0, 0, 20, 0);
    clearButton.Click += clearButton_Click;

    radTimePicker1.TimePickerElement.PopupContentElement.FooterPanel.Children.Add(clearButton);
}

void clearButton_Click(object sender, EventArgs e)
{
    radTimePicker1.Value = null;
}

Please let me know if there is something else I can help you with. 

 

Regards,
Dimitar
Telerik

 

 

[AdrianG]

Thanks very much Dimitar.

What would be the best way to incorporate this in a GridView cell (CustomFormat of HH:mm with TimePicker as editor type).

The reason I'm asking is that when a time has been selected/entered in a cell, users are then finding it very difficult to clear/blank the value. Do you have any tips or recommendations for being able to remove values from cells that have datetime editors (for example using the editor clear button or pressing the delete key)?

Regards

Adrian

[Dimitar]

Hello Adrian,

Thank you for writing back.

You can create a custom editor and use it instead of the default one:

public class MyGridTimePickerEditor : GridTimePickerEditor
{
    public override void OnValueChanged()
    {
        base.OnValueChanged();
    }
    protected override RadElement CreateEditorElement()
    {
        return new MyRadTimePickerElement();

    }
}

public class MyRadTimePickerElement : RadTimePickerElement
{
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(RadTimePickerElement);
        }
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        RadButton b = new RadButton();
        b.Text = "Clear";
        b.AutoSize = true;
        RadHostItem clearButton = new RadHostItem(b);

        b.Click += clearButton_Click;
        clearButton.PositionOffset = new Size(4, 4);
        this.PopupContentElement.FooterPanel.Children.Add(clearButton);
    }

    void clearButton_Click(object sender, EventArgs e)
    {
        this.Value = null;

    }
}

The editor can be changed in the EditorRequired event:

void radGridView1_EditorRequired(object sender, EditorRequiredEventArgs e)
{
    if (e.EditorType == typeof(GridTimePickerEditor))
    {
        e.EditorType = typeof(MyGridTimePickerEditor);
    }
}

if you want to clear the value with the delete key you can override the KeyDown event in the custom RadTimePickerElement class:

protected override void MaskEditBox_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Delete)
    {
        this.Value = null;
        e.Handled = true;
        e.SuppressKeyPress = true;
    }
    else
    {
        base.MaskEditBox_KeyDown(sender, e);
    }
}

Please let me know if there is something else I can help you with. 

 

Regards,
Dimitar
Telerik

 

 

[hans]

I can see the size of the footer change when I change the size of the clearbutton-margin, but I don't see the clearbutton itself.

Do you have a working visualstudio-solution with a custom inherited timepicker?

I tried the following, but it is not working:
public class QTimePicker : RadTimePicker
{
public QTimePicker()
{
var clearButton = new RadButtonElement("Clear");
clearButton.Size = new Size(210, 20);
clearButton.StretchHorizontally = false;
clearButton.Alignment = ContentAlignment.TopRight;
clearButton.Margin = new Padding(50, 50, 50, 50);
clearButton.BackColor = Color.Chartreuse;
clearButton.Click += ClearButton_Click;
TimePickerElement.PopupContentElement.FooterPanel.BackColor = Color.Red;
TimePickerElement.PopupContentElement.FooterPanel.Children.Add(clearButton);
}

public override string ThemeClassName
{
get { return typeof(RadTimePicker).FullName; }
}

private void ClearButton_Click(object sender, EventArgs e)
{
Value = null;
}
}

 

 

[Dimitar]

Hi Hans,

Thank you for writing.

You can use the same custom RadTimePickerElement and add it to the control:

public class MyRadTimePicker : RadTimePicker
{
    protected override RadTimePickerElement CreateTimePickerElement()
    {
        return new MyRadTimePickerElement();
    }
}

public class MyRadTimePickerElement : RadTimePickerElement
{
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(RadTimePickerElement);
        }
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        RadButton b = new RadButton();
        b.Text = "Clear";
        b.AutoSize = true;
        RadHostItem clearButton = new RadHostItem(b);

        b.Click += clearButton_Click;
        clearButton.PositionOffset = new Size(4, 4);
        this.PopupContentElement.FooterPanel.Children.Add(clearButton);
    }

    void clearButton_Click(object sender, EventArgs e)
    {
        this.Value = null;
    }
}

Please let me know if there is something else I can help you with. 

 

Regards,
Dimitar
Telerik