Configure time picker for filter to use 24 hour time format....

[Donovan]

Hi,

I have a grid column as follows:

<telerik:GridDateTimeColumn CurrentFilterFunction="GreaterThanOrEqualTo" DataField="ClockedInAt" DataType="System.DateTime" EditDataFormatString="dd-MMM-yyyy HH:mm" FilterControlAltText="Filter column column" FilterDateFormat="dd-MMM-yyyy HH:mm" PickerType="DateTimePicker" UniqueName="column">
</telerik:GridDateTimeColumn>

I want to change the Time Picker displayed in the filter bar to:

1. Display time in 24 hour format viz HH:mm
2. Change the interval from 1 hour to 30 mins

How can I achieve this?

 

 

[Konstantin Dikov]

Hi Donovan,

For configuring the TimeView of the RadDateTimePicker in the GridDateTimeColumn you will have to get reference to the RadDateTimePicker control within the server-side OnItemCreated or OnItemDataBound event of the grid, when the item is in edit mode and set the TimeFormat and Interval properties of the SharedTimeView object:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item.IsInEditMode && e.Item is GridEditFormItem)
    {
        GridEditFormItem editItem = e.Item as GridEditFormItem;
        RadDateTimePicker picker = editItem["column"].Controls[0] as RadDateTimePicker;
        picker.SharedTimeView.TimeFormat = "HH:mm";
        picker.SharedTimeView.Interval = new TimeSpan(0, 30, 0);
    }
}

*Note that the above code is relevant for the EditForms edit mode.

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Donovan]

Hi Konstantin,

Appreciate you getting back to me. I realise your example is for inline edit within the grid. However what I want to do is control the time picker that is displayed from the filter bar. 

So while ItemCreated does fire for a GridFilteringItem there does not appear to be a way to access the TimePicker it contains. So how do I change the time picker for the filter of the particular column?

[Konstantin Dikov]

Hello Donovan,

For configuring the filter control you could once again handle the server-side OnItemCreated event of the grid, get reference to the GridFilteringItem and find the TableCell element corresponding to the column in question. Once you have reference to the TableCell you can cast the first control from its Controls collection to RadDateTimePicker and apply the same logic:

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true" OnItemCreated="RadGrid1_ItemCreated">
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridDateTimeColumn PickerType="DateTimePicker" DataField="Date" UniqueName="dateColumn"></telerik:GridDateTimeColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the code-behind:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Date", typeof(DateTime));
    for (int i = 1; i < 3; i++)
    {
        table.Rows.Add(i, DateTime.Now.AddDays(i));
    }

    (sender as RadGrid).DataSource = table;
}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem filteringItem = e.Item as GridFilteringItem;
        RadDateTimePicker picker = filteringItem["dateColumn"].Controls[0] as RadDateTimePicker;
        picker.SharedTimeView.TimeFormat = "HH:mm";
        picker.SharedTimeView.Interval = new TimeSpan(0, 30, 0);
    }
}

Best Regards,
Konstantin Dikov
Telerik