How Can I put Date Picker in Gridview in edit mode ASP .Net

asp.net, c#, datepicker, gridview, javascript

Solution

Use the `<asp:TemplateField>` in this case.

The `BoundField` is used by data-bound controls such as GridView to display the value of a field as text. So you can also use a Label for the same purpose when using TemplateField, [ i.e. when using Templates to define the layout of your Columns ]

So, change the Markup for your field: `EFF_DATE` from

 <asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date" 
      HeaderStyle-CssClass="allWidth100" DataFormatString="{0:d}" 
      ItemStyle-HorizontalAlign="Center" 
      ControlStyle-CssClass="txtCommon allWidth80 txtCenter" />

to this:

 <asp:TemplateField>
    <ItemTemplate>
        <asp:Label runat="server" ID="lnl1" 
          Text='<%#DataBinder.Eval(Container.DataItem, "EFF_DATE").ToString()%>'>
        </asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
          <input type="text" id="txtEffDate" name="txtEffDate" 
                 class="txtCommon allWidth80" value="" readonly="readonly" />
          <img alt="Calendar" src="../Images/spain.png" style="cursor: pointer;"
               onclick="javascript: NewCssCal('txtEffDate')" />
    </EditItemTemplate>
  </asp:TemplateField>

Problem

I want to change the default text field in a gridview when in edit mode to a javascript date picker? How can I code it? Code below (Gridview): ``` <asp:GridView id="grdViewEmpList" runat="server" AutoGenerateColumns="false" PageSize="5" allowpaging="true" Font-Size="11px" OnRowDataBound="grdViewEmpList_RowDataBound" GridLines="Both" ShowFooter="false" CssClass="gridview" CellPadding="4" Width="750px" OnRowEditing="grdViewEmpList_RowEditing" PagerSettings-Mode="Numeric" AllowSorting="true" autopostback="true" ShowHeaderWhenEmpty="True" OnRowCancelingEdit="grdViewEmpList_RowCancelingEdit" EmptyDataText="No record found" OnRowCreated="grdViewEmpList_RowCreated" OnPageIndexChanging="grdViewEmpList_PageIndexChanging" OnRowUpdating="grdViewEmpList_RowUpdating"> <RowStyle Wrap="true" ForeColor="#666666" BorderColor="#FFFFFF" BorderWidth="0" BackColor="#CCCCFF" CssClass="gridview_alter"/> <AlternatingRowStyle Wrap="true" ForeColor="#666666" BorderColor="#CCCCCC" BorderWidth="0" BackColor="#FFFFFF" CssClass="gridview_alter"/> <Columns> <asp:CommandField ShowEditButton="True" EditText="Edit" UpdateText="Save" ButtonType="Image" ItemStyle-HorizontalAlign="Center" HeaderText="Action" EditImageUrl="~/Images/dotNet/pencil.png" CancelImageUrl="~/Images/dotNet/edit-not-validated-icon.png" UpdateImageUrl="~/Images/dotNet/edit-validated-icon.png"/> <asp:BoundField DataField="EMP_ID" readonly="true" ItemStyle-Height="20px" HeaderText="Employee ID" HeaderStyle-CssClass="allWidth100" /> <asp:BoundField DataField="NAME" readonly="true" HeaderText="Name" HeaderStyle-CssClass="allWidth460" /> <asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date" HeaderStyle-CssClass="allWidth100" DataFormatString="{0:d}" ItemStyle-HorizontalAlign="Center" ControlStyle-CssClass="txtCommon allWidth80 txtCenter" /> </Columns> <PagerSettings Mode="Numeric" PageButtonCount="5" Position="Bottom" /> <PagerStyle ForeColor="#FFCC33" HorizontalAlign="left" CssClass="gridview_pager"/> </asp:GridView> ``` Code of the Date Picker in HTML which I want to put in above gridview in `EFF_DATE` column: ``` <input type="text" id="txtEffDate" name="txtEffDate" class="txtCommon allWidth80" value="" readonly="readonly" /> <img alt="Calendar" src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" /> ```

Original source