locked
DatePicker in a Gridview RRS feed

  • 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

  • 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
  • User-1314346660 posted

    Hi Brando,

    Thank you very much for this. It works great. I really am very grateful!!!cool

    Can the same logic be applied to alist view as well?

    Billson3000

    Friday, August 3, 2018 7:31 AM