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

4 posts, 0 answers
  1. Donovan
    Donovan avatar
    5 posts
    Member since:
    May 2015

    Posted 25 May 2015 Link to this post

    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?

     

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 28 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Donovan
    Donovan avatar
    5 posts
    Member since:
    May 2015

    Posted 28 May 2015 in reply to Konstantin Dikov Link to this post

    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?

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 02 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top