Quiero cambiar el valor predeterminado del campo de texto en un gridview en el modo de edición a un selector de fecha javascript? ¿Cómo puedo código?

Código de abajo (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>

Código del Selector de Fecha en HTML que quiero poner en arriba gridview en EFF_DATE columna:

<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')" />
  • Tanto la respuesta de FlopScientist y Jumpei Tanaka es correcta. El uso de <asp:TemplateField> es la clave.
InformationsquelleAutor Stuart | 2013-12-09

3 Comentarios

  1. 3

    Utilizar el <asp:TemplateField> en este caso.

    La BoundField es utilizado por los controles enlazados a datos tales como el GridView para mostrar el valor de un campo de texto. Así también se puede utilizar una Etiqueta para el mismo propósito cuando se utiliza TemplateField, [ es decir, cuando el uso de Plantillas para definir el diseño de las Columnas ]

    Así, cambie el Marcado para el campo: EFF_DATE de

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

    a este:

     <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>
  2. 2

    Puede Utilizar TemplateField añadir el selector de fecha en el modo de edición. Agregar una clase personalizada en el cuadro de texto,

    <asp:TemplateField HeaderText="Effective Date" SortExpression="EFF_DATE" >
    <ItemTemplate>
    <asp:Label ID="lblEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
    </ItemTemplate>
    <EditItemTemplate>
    <asp:TextBox ClientIDMode="Static" ID="txtEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>'  CssClass="Datepicker"/>
    </EditItemTemplate>
    </asp:TemplateField>    

    Mediante su gridview ID puede enlazar selector de fecha para su cuadro de texto.

    $(function () {
    var $gv = $("table[id$=grdViewEmpList]");
    var $rows = $("> tbody > tr:not(:has(th, table))", $gv);
    var $inputs = $(".Datepicker", $rows);
    $inputs.datepicker();
    });
  3. 1

    Puede añadir un selector de fecha para uso TemplateField como el de abajo.

                <asp:TemplateField HeaderText="Effective Date" 
    SortExpression="EFF_DATE" >
    <ItemTemplate>
    <asp:Label ID="lblEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
    </ItemTemplate>
    <EditItemTemplate>
    <asp:TextBox ClientIDMode="Static" ID="txtEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
    <img alt="Calendar" src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" />
    </EditItemTemplate>
    </asp:TemplateField>

Dejar respuesta

Please enter your comment!
Please enter your name here