How to add Time picker

[Minh]

Hi,

I have a DateTime column on the RadGrid. I would like to add a time picker to the column. Please send directions and/or sample codes.

thanks,
Minh Bui

[Princy]

Hello Minh,

You can add DateTimePicker to DateTimeColumn in FilterTemplate as shown below.

aspx:

<telerik:GridDateTimeColumn HeaderText="GridDateTimeColumn">
  <FilterTemplate>
     <telerik:RadTimePicker ID="RadTimePicker1" runat="server"></telerik:RadTimePicker>
  </FilterTemplate>
</telerik:GridDateTimeColumn>

Thanks,
Princy.

[Minh]

Hi,

I've added a datetime picker to my code.

 

 

<telerik:GridDateTimeColumn FilterControlAltText="Filter column3 column"  

HeaderText="Event Day/Time" UniqueName="EventDateTimeColumn"  

DataField="_EventdtTime" FilterControlWidth="75px"  

PickerType="DateTimePicker">  

 

<HeaderStyle Width="100px" />

 

<ItemStyle Width="100px" />  

 

</telerik:GridDateTimeColumn>

there are 2 issues
1) On the insert...The time always return 00:00:00 (the date returns ok)...
2) The datetime field returns blank (in the c# code) when the user forgets to pick a date. Please let me know of a way to set a default datetime or a validation to inform the user to choose a date.


thanks,
Minh Bui

 

[Princy]

Hello Minh,

Try setting the SelectedDate for DateTimePicker in ItemDataBound event as shown below.
C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
  if (e.Item is GridEditFormInsertItem && RadGrid1.MasterTableView.IsItemInserted)
  {
       GridEditFormInsertItem editform = (GridEditFormInsertItem)e.Item;
       RadDateTimePicker datepicker = (RadDateTimePicker)editform["EventDateTimeColumn"].Controls[0];
       datepicker.SelectedDate = DateTime.Now;
  }
}

In order to perform validation, you can add a RequiredFieldValidator as explained in the following help documentation.
Validation.

Thanks,
Princy.

[Minh]

Hi,

I have 3 different grids. I've changed the datetime picker column within each grid to allow for the ability to select date and time.......1 of the grid work fine and select the time accurately.

the other 2 grids always return a time of 00:00:00  .......regardless of the time selected. I'm not seeing the difference in the grid that return the correct time and the one that fail to return the correct time. the following is the code that returns an incorrect date.

 

 

<telerik:GridDateTimeColumn FilterControlAltText="Filter EventEndDateTime column"  

UniqueName="EventEndDateTime" HeaderText="Event(s) End Day/Time"  

DataField="_Event_End" FilterControlWidth="75px"  

PickerType="DateTimePicker" >  

 

<HeaderStyle Width="100px" />  

 

<ItemStyle Width="100px" />  

 

</telerik:GridDateTimeColumn>

 

 

[Mira]

Hello Minh,

Could you please try setting the DataField property of the column to DateTime and let me know whether this helps?

I am looking forward to your reply.

All the best,
Mira
the Telerik team

[Minh]

Hi,

I made the change to for DataField to DateTime......the picker is still choosing 00:00:00 for the time.......The DataField is a column binded to an onneeddatasource so I'm not sure that I understand the recommendation.  The change code is as follows.

<telerik:GridDateTimeColumn FilterControlAltText="Filter column3 column"  

HeaderText="Event Day/Time" UniqueName="EventDateTimeColumn"  

DataField="DateTime" FilterControlWidth="75px"  

PickerType="DateTimePicker">   

<HeaderStyle Width="100px" /> 

<ItemStyle Width="100px" />   

</telerik:GridDateTimeColumn>

thanks,
Minh Bui

[Mira]

Hello Minh,

Excuse me for misleading you in my previous post, I meant setting the DataType property.
You can see how this suggestion works in the sample project attached to this message.

I hope it helps.

Greetings,
Mira
the Telerik team

[Minh]

Hi,

I've changed the column to datatype 'System.DateTime' and it is still failing...below is everything within the grid - specifically the column EventEndDateTime

 

 

<telerik:RadGrid ID="GridWellVent" GridLines="None" AutoGenerateColumns="False"

 

 

 

runat="server" AllowPaging="True" AllowSorting="True"

 

 

 

OnItemDataBound="OnItemDataBoundHandler"

 

 

 

ShowStatusBar="True" AllowFilteringByColumn="True"

 

 

 

CellSpacing="0" EnableAJAX="True" onneeddatasource="GridWellVent_NeedDataSource"

 

 

 

oninsertcommand="GridWellVent_InsertCommand"

 

 

 

onupdatecommand="GridWellVent_UpdateCommand"

 

 

 

ondeletecommand="GridWellVent_DeleteCommand" oninit="GridWellVent_Init"

 

 

 

onitemcreated="GridWellVent_ItemCreated">

 

 

 

<MasterTableView ShowFooter="false" DataKeyNames="_ResultsID" EditMode="InPlace"

 

 

 

CommandItemDisplay="TopAndBottom">

 

 

 

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

 

 

 

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

 

 

 

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

 

 

 

<Columns>

 

 

 

<telerik:GridEditCommandColumn FooterText="EditCommand footer" UniqueName="EditCommandColumn"

 

 

 

HeaderText="Edit" HeaderStyle-Width="25px" UpdateText="Update" >

 

 

 

<HeaderStyle Width="25px" HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>

 

 

 

<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />

 

 

 

</telerik:GridEditCommandColumn>

 

 

 

<telerik:GridButtonColumn

 

 

 

HeaderText="Delete" CommandName="Delete" HeaderStyle-Width="25px" Text="Delete"

 

 

 

UniqueName="DeleteColumn"

 

 

 

ConfirmText="Are you sure that you want to delete this event?"

 

 

 

ConfirmTitle="Delete Confirmation" >

 

 

 

<HeaderStyle Width="25px" HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>

 

 

 

</telerik:GridButtonColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="AreaName" HeaderText="Area"

 

 

 

SortExpression="AreaName" ItemStyle-Width="150px" DataField="_AreaName"

 

 

 

AndCurrentFilterFunction="Contains">

 

 

 

<FooterTemplate>

 

Template footer

 

</FooterTemplate>

 

 

 

<FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />

 

 

 

<ItemTemplate>

 

<%

 

#DataBinder.Eval(Container.DataItem, "_AreaName")%>

 

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

 

<telerik:RadComboBox runat="server" ID="RadComboBoxArea" EnableLoadOnDemand="True" DataTextField="AreaName"

 

 

 

OnItemsRequested="RadComboBoxArea_ItemsRequested" DataValueField="ID" AutoPostBack="true"

 

 

 

HighlightTemplatedItems="true" Height="140px" Width="100px" DropDownWidth="200px"

 

 

 

OnSelectedIndexChanged="ComboBox1_OnSelectedIndexChangedHandler">

 

 

 

<ItemTemplate>

 

<%

 

# DataBinder.Eval(Container, "Text")%>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadComboBox>

 

 

 

</EditItemTemplate>

 

 

 

<HeaderStyle Width="100px" />

 

 

 

<ItemStyle Width="100px"></ItemStyle>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="AssetName" HeaderText="FMT"

 

 

 

SortExpression="AssetName" ItemStyle-Width="100px" DataField="_AssetName">

 

 

 

<FooterTemplate>

 

Template footer

 

</FooterTemplate>

 

 

 

<FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />

 

 

 

<ItemTemplate>

 

<%

 

#DataBinder.Eval(Container.DataItem, "_AssetName")%>

 

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

 

<telerik:RadComboBox runat="server" ID="RadComboBoxFMT" EnableLoadOnDemand="True" DataTextField="AssetName"

 

 

 

OnItemsRequested="RadComboBoxFMT_ItemsRequested" DataValueField="ID" AutoPostBack="true"

 

 

 

HighlightTemplatedItems="true" Height="140px" Width="100px" DropDownWidth="200px"

 

 

 

OnSelectedIndexChanged="FMT_OnSelectedIndexChangedHandler">

 

 

 

<ItemTemplate>

 

<%

 

# DataBinder.Eval(Container, "Text")%>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadComboBox>

 

 

 

</EditItemTemplate>

 

 

 

<HeaderStyle Width="100px" />

 

 

 

<ItemStyle Width="100px"></ItemStyle>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="FieldName" HeaderText="Field"

 

 

 

SortExpression="FieldName" ItemStyle-Width="100px" DataField="_FieldName">

 

 

 

<FooterTemplate>

 

Template footer

 

</FooterTemplate>

 

 

 

<FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />

 

 

 

<ItemTemplate>

 

<%

 

#DataBinder.Eval(Container.DataItem, "_FieldName")%>

 

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

 

<telerik:RadComboBox runat="server" ID="RadComboBoxField" EnableLoadOnDemand="True" DataTextField="FieldName"

 

 

 

OnItemsRequested="RadComboBoxField_ItemsRequested" DataValueField="ID" AutoPostBack="true"

 

 

 

HighlightTemplatedItems="true" Height="140px" Width="125px" DropDownWidth="200px"

 

 

 

OnSelectedIndexChanged="Field_OnSelectedIndexChangedHandler">

 

 

 

<ItemTemplate>

 

<%

 

# DataBinder.Eval(Container, "Text")%>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadComboBox>

 

 

 

</EditItemTemplate>

 

 

 

<HeaderStyle Width="100px" />

 

 

 

<ItemStyle Width="100px"></ItemStyle>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="WellBoreName" HeaderText="Well"

 

 

 

SortExpression="WellBoreName" ItemStyle-Width="100px"

 

 

 

DataField="_WellBoreName">

 

 

 

<FooterTemplate>

 

Template footer

 

</FooterTemplate>

 

 

 

<FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />

 

 

 

<ItemTemplate>

 

<%

 

#DataBinder.Eval(Container.DataItem, "_WellBoreName")%>

 

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

 

<telerik:RadComboBox runat="server" ID="RadComboBoxWell" EnableLoadOnDemand="True" DataTextField="WellBoreName"

 

 

 

OnItemsRequested="RadComboBoxWell_ItemsRequested" DataValueField="ID" AutoPostBack="true"

 

 

 

HighlightTemplatedItems="true" Height="140px" Width="100px" DropDownWidth="200px"

 

 

 

OnSelectedIndexChanged="Well_OnSelectedIndexChangedHandler">

 

 

 

<ItemTemplate>

 

<%

 

# DataBinder.Eval(Container, "Text")%>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadComboBox>

 

 

 

</EditItemTemplate>

 

 

 

<ItemStyle Width="100px"></ItemStyle>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn HeaderText="Unloading Type" ItemStyle-Width="100px"

 

 

 

FilterControlAltText="Filter UnloadTypeColumn column"

 

 

 

UniqueName="UnloadTypeColumn">

 

 

 

<ItemTemplate>

 

<%

 

#DataBinder.Eval(Container.DataItem, "_UnloadTypeName")%>

 

 

 

</ItemTemplate>

 

 

 

<EditItemTemplate>

 

 

 

<telerik:RadComboBox runat="server" ID="RadComboBoxUnloadType" DataTextField="UnloadName"

 

 

 

DataValueField="UnloadID" AutoPostBack="True"

 

 

 

OnSelectedIndexChanged="Unload_OnSelectedIndexChangedHandler">

 

 

 

</telerik:RadComboBox>

 

 

 

</EditItemTemplate>

 

 

 

<HeaderStyle Width="100px" />

 

 

 

<ItemStyle Width="100px"></ItemStyle>

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridDateTimeColumn FilterControlAltText="Filter EventStartDateTime column"

 

 

 

UniqueName="EventStartDateTime" HeaderText="Event(s) Start Day/Time"

 

 

 

DataField="_Event_Start" FilterControlWidth="75px"

 

 

 

PickerType="DateTimePicker" DataType="System.DateTime" >

 

 

 

<FooterStyle Width="100px" />

 

 

 

<HeaderStyle Width="100px" />

 

 

 

<ItemStyle Width="100px" />

 

 

 

</telerik:GridDateTimeColumn>

 

 

 

<telerik:GridDateTimeColumn FilterControlAltText="Filter EventEndDateTime column"

 

 

 

UniqueName="EventEndDateTime" HeaderText="Event(s) End Day/Time"

 

 

 

DataField="_Event_End" FilterControlWidth="75px"

 

 

 

PickerType="DateTimePicker" DataType="System.DateTime" >

 

 

 

<HeaderStyle Width="100px" />

 

 

 

<ItemStyle Width="100px" />

 

 

 

</telerik:GridDateTimeColumn>

 

 

 

<telerik:GridNumericColumn DecimalDigits="2"

 

 

 

FilterControlAltText="Filter CountofEvents column" HeaderText="Count of Events"

 

 

 

UniqueName="CountofEvents" DataField="_Event_Count"

 

 

 

FilterControlWidth="20px" ColumnEditorID="EditEventCount"

 

 

 

DefaultInsertValue="1" ForceExtractValue="InBrowseMode"

 

 

 

ShowFilterIcon="False" AllowFiltering="False" >

 

 

 

<FooterStyle Width="50px" />

 

 

 

<HeaderStyle Width="50px"/>

 

 

 

<ItemStyle Width="50px" />

 

 

 

</telerik:GridNumericColumn>

 

 

 

<telerik:GridNumericColumn DecimalDigits="2"

 

 

 

FilterControlAltText="Filter SalesLinePressure column"

 

 

 

HeaderText="Sales Line Pressure (psig)" UniqueName="SalesLinePressure"

 

 

 

DataField="_Sales_Line_Pressure" FilterControlWidth="20px"

 

 

 

ShowFilterIcon="False" AllowFiltering="False" DefaultInsertValue="0" >

 

 

 

<HeaderStyle Width="50px" />

 

 

 

<ItemStyle Width="50px" />

 

 

 

<FooterStyle Width="50px" />

 

 

 

</telerik:GridNumericColumn>

 

 

 

<telerik:GridNumericColumn DataField="_Event_Duration" DecimalDigits="2"

 

 

 

FilterControlAltText="Filter EventDuration column" FilterControlWidth="15px"

 

 

 

HeaderText="Event(s) Duration" UniqueName="EventDuration"

 

 

 

DefaultInsertValue="0">

 

 

 

<FooterStyle Width="40px" />

 

 

 

<HeaderStyle Width="40px" />

 

 

 

<ItemStyle Width="40px" />

 

 

 

</telerik:GridNumericColumn>

 

 

 

<telerik:GridNumericColumn DecimalDigits="2"

 

 

 

FilterControlAltText="Filter ShutInPressure column"

 

 

 

HeaderText="Shut In Pressure (psig)" UniqueName="ShutInPressure"

 

 

 

DataField="_Shut_In_Pressure" FilterControlWidth="20px"

 

 

 

ShowFilterIcon="False" AllowFiltering="False" DefaultInsertValue="0" >

 

 

 

<HeaderStyle Width="50px" />

 

 

 

<ItemStyle Width="50px" />

 

 

 

<FooterStyle Width="50px" />

 

 

 

</telerik:GridNumericColumn>

 

 

 

<telerik:GridBoundColumn DataField="_Created_By"

 

 

 

FilterControlAltText="Filter CreatedBy column" FilterControlWidth="25px"

 

 

 

HeaderText="Created By" ReadOnly="True" Resizable="False"

 

 

 

UniqueName="CreatedBy">

 

 

 

<FooterStyle Width="75px" />

 

 

 

<HeaderStyle Width="75px" />

 

 

 

<ItemStyle Width="75px" />

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="_Created_Date"

 

 

 

FilterControlAltText="Filter CreationDate column"

 

 

 

HeaderText="Creation Date" FilterControlWidth="50px"

 

 

 

UniqueName="CreationDate" ReadOnly="True">

 

 

 

<FooterStyle Width="75px" />

 

 

 

<HeaderStyle Width="75px" />

 

 

 

<ItemStyle Width="75px" />

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn FilterControlAltText="Filter FOpHierarchy_ID column"

 

 

 

DataField="_ID" HeaderText="FOpHierarchy_ID"

 

 

 

UniqueName="FOpHierarchy_ID" AllowFiltering="False" Visible="False">

 

 

 

</telerik:GridBoundColumn>

 

 

 

</Columns>

 

 

 

<EditFormSettings>

 

 

 

<EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column"></EditColumn>

 

 

 

</EditFormSettings>

 

 

 

</MasterTableView>

 

<

 

 

FilterMenu EnableImageSprites="False"></FilterMenu>

 

<

 

 

HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

 

 

 

</telerik:RadGrid>

 

[Mira]

Hello Minh,

As you can see from the project attached to my previous message, I am unable to replicate the issue which you described.
Please open a formal support ticket and send us a small working project, demonstrating your full setup and showing the unwanted behavior.
We will debug it locally and get back to you with our findings.

Thank you in advance for the cooperation.

Best wishes,
Mira
the Telerik team

[Minh]

Hi,

this is resolved. it is working correctly. There was a parameter that was missing during the datetime.parse.

thanks,
Minh Bui