Using RadDatePicker/RadDateTimePicker as editor in template column of RadGrid

 

Article information
Article relates to	RadGrid, RadCalendar or Telerik.Web.UI 2007.3.12.18+
Created by	Stephen, Telerik
Last modified	March 12, 2008
Last modified by	Stephen, Telerik

HOW-TO
Use RadDatePicker/RadDateTimePicker as editor in template column of RadGrid

SOLUTION
You can embed the date picker/datetime picker instances in EditItemTemplate of GridTemplateColumn and bind the their DbSelectedDate properties directly in the grid edit column template.

On update/insert command you can extract the newly entered/updated data from the date picker/datetime picker editors through the ExtractValuesFromItems(newValues, EditInsertitem) method (part of the server-side API of RadGrid). Then just refresh the grid source content to reflect the changes made by the user:

VB.NET

Private Sub RadGrid1_UpdateCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) Handles RadGrid1.UpdateCommand

Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)

Dim employeesTable As DataTable = CType(Session("gridSource"), DataTable)

Dim changedRows As DataRow() = employeesTable.Select("EmployeeID = " & editedItem.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("EmployeeID"))

If Not (changedRows.Length = 1) Then

RadGrid1.Controls.Add(New LiteralControl("Unable to locate the Employee for updating."))

e.Canceled = True

Return

End If

Dim newValues As Hashtable = New Hashtable

e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem)

Dim changedRow As DataRow = changedRows(0)

changedRow.BeginEdit()

Try

For Each entry As DictionaryEntry In newValues

changedRow(CType(entry.Key, String)) = entry.Value

Next

changedRow.EndEdit()

Catch ex As Exception

changedRow.CancelEdit()

RadGrid1.Controls.Add(New LiteralControl("Unable to update Employees. Reason: " & ex.Message))

e.Canceled = True

End Try

RadGrid1.Controls.Add(New LiteralControl("Employee " & changedRow("EmployeeID") & " updated"))

End Sub

Protected Sub RadGrid1_InsertCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) Handles RadGrid1.InsertCommand

Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)

Dim employeeTable As DataTable = CType(Session("gridSource"), DataTable)

Dim newRow As DataRow = employeeTable.NewRow

Dim allValues As DataRow() = employeeTable.Select("", "EmployeeID", DataViewRowState.CurrentRows)

If allValues.Length > 0 Then

newRow("EmployeeID") = CType(allValues(allValues.Length - 1)("EmployeeID"), Integer) + 1

Else

newRow("EmployeeID") = 1

End If

Dim newValues As Hashtable = New Hashtable

e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem)

Try

For Each entry As DictionaryEntry In newValues

newRow(CType(entry.Key, String)) = entry.Value

Next

Catch ex As Exception

RadGrid1.Controls.Add(New LiteralControl("Unable to insert into Orders. Reason: " & ex.Message))

e.Canceled = True

End Try

employeeTable.Rows.Add(newRow)

RadGrid1.Controls.Add(New LiteralControl("Employee " & newRow("EmployeeID") & " inserted"))

End Sub

Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

If (Session("gridSource") Is Nothing) Then

Dim MyOleDbConnection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Grid/Data/Access/Nwind.mdb"))

Dim MyOleDbDataAdapter As New OleDbDataAdapter

MyOleDbDataAdapter.SelectCommand = New OleDbCommand("SELECT EmployeeID, FirstName, LastName, BirthDate, HireDate FROM Employees", MyOleDbConnection)

Dim myDataTable As New DataTable

MyOleDbConnection.Open()

Try

MyOleDbDataAdapter.Fill(myDataTable)

Finally

MyOleDbConnection.Close()

End Try

RadGrid1.DataSource = myDataTable.DefaultView

Session("gridSource") = myDataTable

Else

RadGrid1.DataSource = Session("gridSource")

End If

End Sub

C#

private void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

if (Session["gridSource"] == null)

{

OleDbConnection MyOleDbConnection = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Grid/Data/Access/Nwind.mdb"));

OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();

MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT EmployeeID, FirstName, LastName, BirthDate, HireDate FROM Employees", MyOleDbConnection);

DataTable myDataTable = new DataTable();

MyOleDbConnection.Open();

try

{

MyOleDbDataAdapter.Fill(myDataTable);

}

finally

{

MyOleDbConnection.Close();

}

RadGrid1.DataSource = myDataTable.DefaultView;

Session["gridSource"] = myDataTable;

}

else

{

RadGrid1.DataSource = Session["gridSource"];

}

}

private void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)

{

GridEditableItem editedItem = (GridEditableItem)e.Item;

DataTable employeesTable = (DataTable)Session["gridSource"];

DataRow[] changedRows = employeesTable.Select("EmployeeID = " + editedItem.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("EmployeeID"));

if (changedRows.Length != 1)

{

RadGrid1.Controls.Add(new LiteralControl("Unable to locate the Employee for updating."));

e.Canceled = true;

return;

}

Hashtable newValues = new Hashtable();

e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem);

DataRow changedRow = changedRows(0);

changedRow.BeginEdit();

try

{

foreach (DictionaryEntry entry in newValues)

{

changedRow[(string)entry.Key] = entry.Value;

}

changedRow.EndEdit();

}

catch (Exception ex)

{

changedRow.CancelEdit();

RadGrid1.Controls.Add(new LiteralControl("Unable to update Employees. Reason: " + ex.Message));

e.Canceled = true;

}

RadGrid1.Controls.Add(new LiteralControl("Employee " + changedRow["EmployeeID"] + " updated"));

}

protected void RadGrid1_InsertCommand(object source, GridCommandEventArgs e)

{

GridEditableItem editedItem = (GridEditableItem)e.Item;

DataTable employeeTable = (DataTable)Session["gridSource"];

DataRow newRow = employeeTable.NewRow;

DataRow[] allValues = employeeTable.Select("", "EmployeeID", DataViewRowState.CurrentRows);

if (allValues.Length > 0)

{

newRow["EmployeeID"] = (int)allValues[allValues.Length - 1]["EmployeeID"] + 1;

}

else

{

newRow["EmployeeID"] = 1;

}

Hashtable newValues = new Hashtable();

e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem);

try

{

foreach (DictionaryEntry entry in newValues)

{

newRow[(string)entry.Key] = entry.Value;

}

}

catch (Exception ex)

{

RadGrid1.Controls.Add(new LiteralControl("Unable to insert into Orders. Reason: " + ex.Message));

e.Canceled = true;

}

employeeTable.Rows.Add(newRow);

RadGrid1.Controls.Add(new LiteralControl("Employee " + newRow["EmployeeID"] + " inserted"));

}

    

  


ASPX/ASCX

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

Width="75px" Transparency="25">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0px;" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Office2007">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" CommandItemDisplay="Top" EditMode="InPlace">

<Columns>

<telerik:GridBoundColumn HeaderText="First name" DataField="FirstName" UniqueName="FirstName" />

<telerik:GridBoundColumn HeaderText="Last name" DataField="LastName" UniqueName="LastName" />

<telerik:GridTemplateColumn HeaderText="Birth date" UniqueName="BirthDateColumn">

<EditItemTemplate>

<telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("BirthDate", "{0:D}") %>' SharedCalendarID="" MinDate="01-01-1900">

<DateInput runat="server" />

</telerik:RadDateTimePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dtLabel" runat="server" Text='<%# Eval("BirthDate", "{0:D}") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Hire date" UniqueName="HireDateColumn">

<EditItemTemplate>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("HireDate", "{0:d}") %>' SharedCalendarID="">

<DateInput runat="server" />

</telerik:RadDatePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dLabel" runat="server" Text='<%# Eval("HireDate", "{0:d}") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn />

</Columns>

</MasterTableView>

</telerik:RadGrid>

ASPX/ASCX

<radG:RadGrid ID="RadGrid1" runat="server" EnableAJAX="True" Skin="Office2007" EnableAJAXLoadingTemplate="True"

LoadingTemplateTransparency="25">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" CommandItemDisplay="Top" EditMode="InPlace">

<Columns>

<radG:GridBoundColumn HeaderText="First name" DataField="FirstName" UniqueName="FirstName" />

<radG:GridBoundColumn HeaderText="Last name" DataField="LastName" UniqueName="LastName" />

<radG:GridTemplateColumn HeaderText="Birth date" UniqueName="BirthDateColumn">

<EditItemTemplate>

<radCln:RadDateTimePicker ID="RadDateTimePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("BirthDate", "{0:D}") %>' SharedCalendarID="" MinDate="01-01-1900">

<DateInput CatalogIconImageUrl="" Description="" DisplayPromptChar="_" PromptChar=" "

RangeValidation="Immediate" Title="" TitleIconImageUrl="" TitleUrl=""></DateInput>

</radCln:RadDateTimePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dtLabel" runat="server" Text='<%# Eval("BirthDate", "{0:D}") %>' />

</ItemTemplate>

</radG:GridTemplateColumn>

<radG:GridTemplateColumn HeaderText="Hire date" UniqueName="HireDateColumn">

<EditItemTemplate>

<radCln:RadDatePicker ID="RadDatePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("HireDate", "{0:d}") %>' SharedCalendarID="">

<DateInput CatalogIconImageUrl="" Description="" DisplayPromptChar="_" PromptChar=" "

RangeValidation="Immediate" Title="" TitleIconImageUrl="" TitleUrl=""></DateInput>

</radCln:RadDatePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dLabel" runat="server" Text='<%# Eval("HireDate", "{0:d}") %>' />

</ItemTemplate>

</radG:GridTemplateColumn>

<radG:GridEditCommandColumn />

</Columns>

</MasterTableView>

</radG:RadGrid>

The second approach uses automatic operations and does not require a single line of code to be written in the code-behind of the page (except for handling the null values passed on insert once again):

  

ASPX/ASCX

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

Transparency="25" Width="75px">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0px;" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Office2007" AllowAutomaticUpdates="True" AllowAutomaticInserts="True" DataSourceID="gridDataSource" GridLines="None">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" CommandItemDisplay="Top" EditMode="InPlace" DataSourceID="gridDataSource"

AllowAutomaticUpdates="true" AllowAutomaticInserts="true">

<Columns>

<telerik:GridBoundColumn HeaderText="First name" DataField="FirstName" UniqueName="FirstName" />

<telerik:GridBoundColumn HeaderText="Last name" DataField="LastName" UniqueName="LastName" />

<telerik:GridTemplateColumn HeaderText="Birth date" UniqueName="BirthDateColumn">

<EditItemTemplate>

<telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("BirthDate", "{0:D}") %>' SharedCalendarID="" MinDate="01-01-1900">

<DateInput runat="server" />

</telerik:RadDateTimePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dtLabel" runat="server" Text='<%# Eval("BirthDate", "{0:D}") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Hire date" UniqueName="HireDateColumn">

<EditItemTemplate>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("HireDate", "{0:d}") %>' SharedCalendarID="">

<DateInput runat="server" />

</telerik:RadDatePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dLabel" runat="server" Text='<%# Eval("HireDate", "{0:d}") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn />

</Columns>

</MasterTableView>

</telerik:RadGrid>

<br />

<asp:AccessDataSource ID="gridDataSource" runat="server" ConflictDetection="CompareAllValues"

DataFile="~/App_Data/Nwind.mdb"

InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [BirthDate], [HireDate]) VALUES (?, ?, ?, ?)"

OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [BirthDate], [HireDate] FROM [Employees]"

UpdateCommand="UPDATE [Employees] SET [LastName] = ?, [FirstName] = ?, [BirthDate] = ?, [HireDate] = ? WHERE [EmployeeID] = ? AND [LastName] = ? AND [FirstName] = ? AND [BirthDate] = ? AND [HireDate] = ?">

<UpdateParameters>

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="BirthDate" Type="DateTime" />

<asp:Parameter Name="HireDate" Type="DateTime" />

<asp:Parameter Name="original_EmployeeID" Type="Int32" />

<asp:Parameter Name="original_LastName" Type="String" />

<asp:Parameter Name="original_FirstName" Type="String" />

<asp:Parameter Name="original_BirthDate" Type="DateTime" />

<asp:Parameter Name="original_HireDate" Type="DateTime" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="BirthDate" Type="DateTime" />

<asp:Parameter Name="HireDate" Type="DateTime" />

</InsertParameters>

</asp:AccessDataSource>

ASPX/ASCX

<radG:RadGrid ID="RadGrid1" runat="server" EnableAJAX="True" Skin="Office2007" EnableAJAXLoadingTemplate="True"

LoadingTemplateTransparency="25" AllowAutomaticUpdates="True" AllowAutomaticInserts="True" DataSourceID="gridDataSource" GridLines="None">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="EmployeeID" CommandItemDisplay="Top" EditMode="InPlace" DataSourceID="gridDataSource">

<Columns>

<radG:GridBoundColumn HeaderText="First name" DataField="FirstName" UniqueName="FirstName" />

<radG:GridBoundColumn HeaderText="Last name" DataField="LastName" UniqueName="LastName" />

<radG:GridTemplateColumn HeaderText="Birth date" UniqueName="BirthDateColumn">

<EditItemTemplate>

<radCln:RadDateTimePicker ID="RadDateTimePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("BirthDate", "{0:D}") %>' SharedCalendarID="" MinDate="01-01-1900">

<DateInput CatalogIconImageUrl="" Description="" DisplayPromptChar="_" PromptChar=" "

RangeValidation="Immediate" Title="" TitleIconImageUrl="" TitleUrl=""></DateInput>

</radCln:RadDateTimePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dtLabel" runat="server" Text='<%# Eval("BirthDate", "{0:D}") %>' />

</ItemTemplate>

</radG:GridTemplateColumn>

<radG:GridTemplateColumn HeaderText="Hire date" UniqueName="HireDateColumn">

<EditItemTemplate>

<radCln:RadDatePicker ID="RadDatePicker1" runat="server" Culture="English (United States)"

DbSelectedDate='<%# Bind("HireDate", "{0:d}") %>' SharedCalendarID="">

<DateInput CatalogIconImageUrl="" Description="" DisplayPromptChar="_" PromptChar=" "

RangeValidation="Immediate" Title="" TitleIconImageUrl="" TitleUrl=""></DateInput>

</radCln:RadDatePicker>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="dLabel" runat="server" Text='<%# Eval("HireDate", "{0:d}") %>' />

</ItemTemplate>

</radG:GridTemplateColumn>

<radG:GridEditCommandColumn />

</Columns>

</MasterTableView>

</radG:RadGrid><asp:AccessDataSource ID="gridDataSource" runat="server" ConflictDetection="CompareAllValues"

DataFile="~/Grid/Data/Access/Nwind.mdb"

InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [BirthDate], [HireDate]) VALUES (?, ?, ?, ?)"

OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [BirthDate], [HireDate] FROM [Employees]"

UpdateCommand="UPDATE [Employees] SET [LastName] = ?, [FirstName] = ?, [BirthDate] = ?, [HireDate] = ? WHERE [EmployeeID] = ? AND [LastName] = ? AND [FirstName] = ? AND [BirthDate] = ? AND [HireDate] = ?">

<UpdateParameters>

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="BirthDate" Type="DateTime" />

<asp:Parameter Name="HireDate" Type="DateTime" />

<asp:Parameter Name="original_EmployeeID" Type="Int32" />

<asp:Parameter Name="original_LastName" Type="String" />

<asp:Parameter Name="original_FirstName" Type="String" />

<asp:Parameter Name="original_BirthDate" Type="DateTime" />

<asp:Parameter Name="original_HireDate" Type="DateTime" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="BirthDate" Type="DateTime" />

<asp:Parameter Name="HireDate" Type="DateTime" />

</InsertParameters>

</asp:AccessDataSource>

For additional information you can refer to the four demo projects enclosed at the bottom of this thread. Note that if you prefer to fetch the data from the column editors individually, you can do that looping through the column editors manually as presented in this online demo.       

Finally, you may prefer to use the five new built-in column types instead of template columns with editors in them.
    

Comments

• Telerik Admin , Mar 14, 2007

  Hi guys, The knowledge base article has been updated and two demo projects are enclosed at the bottom of the thread.

• Eddie Hernandez , Mar 23, 2007

  thank you very much

• Brian Check , May 15, 2007

  Demo project crashes when you try and add a new record

• Telerik Admin , May 16, 2007

  It seems that we forgot to uncomment the part inside the ItemCommand handler by mistake. If you do that everything should be fine - I have updated the attached project for your convenience.

• DMM , Sep 4, 2007

  Project crashes when you add new then edit also? Is this fixable?

• Telerik Admin , Sep 4, 2007

  Try to close the insert form prior to the edit action to avoid the exception when editing/inserting at the same time. More info about how to control the edit/insert/regular RadGrid modes you can gather from this resouce: http://www.telerik.com/help/aspnet/grid/grdSwitchingInsertAddModes.html

• kellyroberts , Sep 21, 2007

  Hi all, I noticed something interesting here. my date picker has a DBSelectedDate value of <%# Bind("SomeDateField","{0:d}") %> and of course when I attempt to insert a new record I get an error 'String was not recognized as a valid date/time' well, I took off the formatting part and it works just fine now. you guys may have already figured this out ... FYI

• Telerik Admin , Sep 24, 2007

  Have you been able to replicate the issue applying format string for the date in the project enclosed to this knowledge base entry? If you are unable to resolve the issue yourself, start a formal support ticket and attach a sample project to it. We will debug it locally and will advice you further.

• Jim , Nov 13, 2007

  Needs to show how you initialize the edit templates in code-behind.

• Andrew , Jun 5, 2008

  Awesome, the DBSelectedValue property is exactly what I was after and this article helped me find it :)

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!