Remove From My Forums

DatePicker in a Gridview

Question

User-1314346660 posted

Hello Masters,

Can someone point me in the right direction on this one please!?

I have a gridview. It brings back some data. I want to have an editable field that uses a datepicker. I can build a gridview, an editable list view and also link a datepicker to a text box but I cant put them together!

My code is below. I would be really grateful for an help. Thank you.

Billson3000

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Flu Immunisation Consent</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://getaddress.io/js/jquery.getAddress-2.0.7.min.js"></script>
    <script src="Scripts/moment.js"></script>
    <script src="Scripts/bootstrap-datetimepicker.js"></script>
<!-- Boostrap CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css" />
    <!-- Boostrap DatePicket CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
    <!-- Boostrap DatePciker JS  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RecordId" DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:BoundField DataField="RecordId" HeaderText="RecordId" ReadOnly="True" SortExpression="RecordId" />
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                    <asp:TemplateField HeaderText="AdministerDate" 
                            <EditItemTemplate>
                                <asp:TextBox ID="AdministerDate" runat="server">'></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblAdministerDate" runat="server" Text='<%#Bind("AdministerDate") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>

                </Columns>
            </asp:GridView>
            <script type="text/javascript">
                $(document).ready(function () {
                    var dp = $('#<%=AdministerDate.ClientID%>');
                    dp.datepicker({
                        changeMonth: true,
                        changeYear: true,
                        format: "dd/mm/yyyy",
                        language: "tr"
                    }).on('changeDate', function (ev) {

                        $(this).datepicker('hide');
                    });
                });
            </script>

              <script type="text/javascript">
                   $(function () {
                       $('#ShipDate').datetimepicker();
                   });
                </script>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" SelectCommand="SELECT [RecordId], [FirstName], [AdministerDate] FROM [MyTable]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

Thursday, July 26, 2018 8:54 PM

Answers

User283571144 posted

Hi Billson3000,

Since your TextBox for datepicker is in gridview’s EditItemTemplate , you couldn’t directly visit it use expression <%=AdministerDate.ClientID%>.

You could only use textbox’s cssClass property to add a class to the textbox and use jquery selector to select the textbox.

Furthermore, since templatelateField is customized field , the gridview won’t pass its value directly to your sqldatasource.

You should pass its value to sqldatasource mannully in gridview’s onrowUpdating event.

More details, you could refer to below codes:

   <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RecordId" DataSourceID="SqlDataSource1" AutoGenerateEditButton="True" OnRowUpdating="GridView1_RowUpdating">
                <Columns>
                    <asp:BoundField DataField="RecordId" HeaderText="RecordId" ReadOnly="True" SortExpression="RecordId" InsertVisible="False" />
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                    <asp:TemplateField HeaderText="AdministerDate" >
                            <EditItemTemplate>
                                <asp:TextBox ID="AdministerDate" runat="server" CssClass="myDate"></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblAdministerDate" runat="server" Text='<%#Bind("AdministerDate") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
 
 
                </Columns>
            </asp:GridView>
            <script type="text/javascript">
                $(document).ready(function () {
                    var dp = $('.myDate');
                    dp.datepicker({
                        changeMonth: true,
                        changeYear: true,
                        format: "dd/mm/yyyy",
                        language: "tr"
                    }).on('changeDate', function (ev) {
 
                        $(this).datepicker('hide');
                    });
                });
            </script>
 
              <script type="text/javascript">
                   $(function () {
                       $('#ShipDate').datetimepicker();
                   });
                </script>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WebFormCases.Models.supplyModelConnectionString %>" SelectCommand="SELECT [RecordId], [FirstName], [AdministerDate] FROM [Record]" DeleteCommand="DELETE FROM [Record] WHERE [RecordId] = @RecordId" InsertCommand="INSERT INTO [Record] ([FirstName], [AdministerDate]) VALUES (@FirstName, @AdministerDate)" UpdateCommand="UPDATE [Record] SET [FirstName] = @FirstName, [AdministerDate] = @AdministerDate WHERE [RecordId] = @RecordId">
                <DeleteParameters>
                    <asp:Parameter Name="RecordId" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="FirstName" Type="String" />
                    <asp:Parameter Name="AdministerDate" Type="DateTime" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="FirstName" Type="String" />
                    <asp:Parameter Name="AdministerDate" Type="DateTime" />
                    <asp:Parameter Name="RecordId" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
        </div>
</form>

Code-behind:

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {
            //get the edit row
            GridViewRow gvr = this.GridView1.Rows[this.GridView1.EditIndex];
            //get the date in the textbox
            TextBox textBox = (TextBox)gvr.FindControl("AdministerDate");
            //convert it to datetime
           DateTime time= DateTime.ParseExact(textBox.Text, "dd/MM/yyyy", System.Globalization.CultureInfo.InvariantCulture);
            //add it to the collection which stores data to  update
            e.NewValues["AdministerDate"] = time;
        }

Result:

Best Regards,

Brando

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, July 27, 2018 5:51 AM

All replies