Question

118

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

rated 0 times [ 124] [ 6] / answers: 1 / hits: 16601 / 11 Years ago, mon, december 9, 2013, 12:00:00

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') />

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raymondd

Add To Favorites

Follow

Total Points: 620

Total Questions: 112

Total Answers: 94

Location: Namibia

Member since Mon, Feb 21, 2022

2 Years ago

answered 11 Years ago victorr · Accepted Answer

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>