Add Calendar Control in GrdView BoundField on Edit mode using jQuery in ASP.Net

phonghue

SOLVED CLOSED ACTIVE ANSWERED
User: phonghue
Posted: on Apr 03, 2020 06:39 AM
Forum: Data Controls
Answer: 1
Views: 10510

hello,

can you help me to add the calendar into the Gridview (Edit Mode) that have the bound field "Contact Date".

when i click on the "Contact Date" Field, then the calendar will popout for me to select the date and i can click on the "update" button to save it.

thanks.

   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource3" DataKeyNames="AutoNum">
       <AlternatingRowStyle BackColor="#CCCCFF" />
       <Columns>
           <asp:TemplateField HeaderText="AutoNum" InsertVisible="False" SortExpression="AutoNum" Visible="False">
               <EditItemTemplate>
                   <asp:Label ID="Label1" runat="server" Text='<%# Eval("AutoNum")%>'></asp:Label>
               </EditItemTemplate>
               <ItemTemplate>
                   <asp:Label ID="Label2" runat="server" Text='<%# Bind("AutoNum")%>'></asp:Label>
               </ItemTemplate>
           </asp:TemplateField> 
           <asp:BoundField DataField="AutoNum" HeaderText="AutoNum" SortExpression="AutoNum" InsertVisible="False" ReadOnly="True" visible="false" />
           <asp:BoundField DataField="StudCWID" HeaderText="CWID" SortExpression="StudCWID" ReadOnly="True"/>
           <asp:BoundField DataField="TermID" HeaderText="Term" SortExpression="TermID" InsertVisible="False" Visible="false" ReadOnly="True" />
           <asp:BoundField DataField="FWCourse" HeaderText="Course" SortExpression="FWCourse" InsertVisible="False" ReadOnly="True"/>
           <asp:BoundField DataField="STUDLastname" HeaderText="STUDLastname" SortExpression="STUDLastname" visible="false"  />
           <asp:BoundField DataField="STUDFirstname" HeaderText="STUDFirstname" SortExpression="STUDFirstname" visible="false" />
           <asp:BoundField DataField="Student" HeaderText="Student" SortExpression="Student" ReadOnly="True" />
           <asp:BoundField DataField="OrgCode" HeaderText="Agency" SortExpression="OrgCode" InsertVisible="False" ReadOnly="True" />
           <asp:BoundField DataField="SupervisorName" HeaderText="Supv. Name" SortExpression="SupervisorName" InsertVisible="False" ReadOnly="True"/>
           <asp:BoundField DataField="OPPhone" HeaderText="Supv. Phone" SortExpression="OPPhone" InsertVisible="False" ReadOnly="True"/>
           <asp:BoundField DataField="SPNotes" HeaderText="Notes" SortExpression="SPNotes" />
           <asp:BoundField DataField="ContactDate" HeaderText="Contact Date" SortExpression="ContactDate" />
           <asp:CommandField ShowEditButton="True" buttontype ="Button"/>
           <asp:CommandField ShowDeleteButton="True"  buttontype ="Button" />
       </Columns>
   </asp:GridView> 
   <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:DBHUSRConnectionString %>" SelectCommand="QFacTeachingCourse_sp" SelectCommandType="StoredProcedure"
        UpdateCommand="UPDATE STUDENTSPLACEMENTS SET SPNotes = @SPNotes, ContactDate = @ContactDate
       WHERE (AutoNum = @AutoNum)"
        DeleteCommand="DELETE FROM STUDENTSPLACEMENTS
           WHERE (AutoNum = @AutoNum)">        
       <DeleteParameters>
           <asp:Parameter Name="AutoNum" />
       </DeleteParameters> 
       <SelectParameters>
           <asp:ControlParameter ControlID="Label1" Name="FacID" PropertyName="Text" Type="String" />
           <asp:ControlParameter ControlID="DropDownList1" Name="TermID" PropertyName="SelectedValue" Type="String" />
           <asp:ControlParameter ControlID="DropDownList2" Name="FWCourse" PropertyName="SelectedValue" Type="String" />
       </SelectParameters>   
       <UpdateParameters>
           <asp:Parameter Name="SPNotes" />
           <asp:Parameter Name="ContactDate" />
           <asp:Parameter Name="AutoNum" />
       </UpdateParameters>         
    </asp:SqlDataSource>

Download FREE API for Word, Excel and PDF in ASP.Net

arunkurm...

0 2

Reply
ANSWER
User: arunkurmi
Replied: on Apr 03, 2020 08:43 AM
Report

Hi phonghue,

I have created an example.

Check this example and its reference to modify your code.

Database

CREATE TABLE STUDENTSPLACEMENTS
(
	AutoNum INT IDENTITY PRIMARY KEY,
	StudCWID INT,
	TermID INT,
	STUDFirstname VARCHAR(50),
	STUDLastname VARCHAR(50),
	ContactDate DATETIME
)

INSERT INTO STUDENTSPLACEMENTS VALUES(1,1,'Test1 First','Test1 Last',GETDATE())
INSERT INTO STUDENTSPLACEMENTS VALUES(2,2,'Test2 First','Test2 Last',GETDATE())
INSERT INTO STUDENTSPLACEMENTS VALUES(3,1,'Test3 First','Test3 Last',GETDATE())
INSERT INTO STUDENTSPLACEMENTS VALUES(4,2,'Test4 First','Test4 Last',GETDATE())

SELECT * FROM STUDENTSPLACEMENTS

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=GridView1]").find(":text").each(function () {
                var title = $(this).attr("title");
                if (title == "Contact Date") {
                    $(this).datepicker({
                        dateFormat: 'dd-mm-yy'
                    });
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource3" DataKeyNames="AutoNum">
                <AlternatingRowStyle BackColor="#CCCCFF" />
                <Columns>
                    <asp:BoundField DataField="AutoNum" HeaderText="AutoNum" SortExpression="AutoNum" InsertVisible="False" ReadOnly="True" Visible="false" />
                    <asp:BoundField DataField="StudCWID" HeaderText="CWID" SortExpression="StudCWID" ReadOnly="True" />
                    <asp:BoundField DataField="STUDLastname" HeaderText="STUDLastname" SortExpression="STUDLastname" Visible="false" />
                    <asp:BoundField DataField="STUDFirstname" HeaderText="STUDFirstname" SortExpression="STUDFirstname" Visible="false" />
                    <asp:BoundField DataField="ContactDate" HeaderText="Contact Date" SortExpression="ContactDate" DataFormatString="{0:dd-MM-yyyy}" />
                    <asp:CommandField ShowEditButton="True" ButtonType="Button" />
                    <asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:DBHUSRConnectionString %>"
                SelectCommand="SELECT * FROM STUDENTSPLACEMENTS" SelectCommandType="Text"
                UpdateCommand="UPDATE STUDENTSPLACEMENTS SET ContactDate = @ContactDate WHERE (AutoNum = @AutoNum)"
                DeleteCommand="DELETE FROM STUDENTSPLACEMENTS WHERE (AutoNum = @AutoNum)">
                <DeleteParameters>
                    <asp:Parameter Name="AutoNum" Type="Int32" />
                </DeleteParameters>
                <UpdateParameters>
                    <asp:Parameter Name="ContactDate" Type="DateTime" />
                    <asp:Parameter Name="AutoNum" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

Screenshot

Database record after update

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Add Calendar Control in GrdView BoundField on Edit mode using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us