Question

我有一个gridview，并且在gridview编辑模式下使用了引导日期时间选择器。弹出日历显示无法正常工作。它显示在网格上方。这是屏幕截图

当我单击gridview edit行时，calendar弹出窗口显示在网格上方。另外，让我知道如何在gridview行编辑命令中获取此文本框值。

<script>
    $(function () {
       $('#datetimepicker1').datetimepicker();
    });
</script>

<asp:GridView ID="GridView1" ClientIDMode="Static" OnRowCommand ="GridView1_RowCommand"         Width ="100%" Height ="80px" runat="server" AutoGenerateColumns="False" DataKeyNames="OpenEventID"  OnPageIndexChanging="GridView1_PageIndexChanging" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowDataBound="GridView1_RowDataBound"   BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">  
          <Columns>  
                <asp:BoundField  ReadOnly="true"   DataField="OpenEventID" HeaderText="OPEN EVENT NO" />
                <asp:TemplateField>
<ItemTemplate>

     <asp:Label runat="server" ID='lblDate' Text='<%# Eval("Open_Created_Date") %>'></asp:Label>
</ItemTemplate>

<EditItemTemplate>
    <asp:TextBox runat="server" ID="datetimepicker1"></asp:TextBox>
</EditItemTemplate>

</asp:TemplateField>
       <%--<asp:BoundField   ReadOnly="true"  DataField="Open_Created_Date" HeaderText="Open Event Created" />--%>

       <asp:BoundField   ReadOnly="true"  DataField="Created_Date" HeaderText="Close Event Created" />
       <asp:BoundField    DataField="Downtime" ReadOnly="true" HeaderText="Downtime" /> 
       <asp:BoundField  ReadOnly="true"  DataField="FLEET_NO" HeaderText="Asset" /> 
       <asp:BoundField   DataField="CloseWorkDesc" HeaderText="Close Work Description" />

       <asp:BoundField    ReadOnly="true" DataField="Department" HeaderText="Department" />

       <asp:BoundField  ReadOnly="true"   DataField="Close_Event_Created" HeaderText="Close Event Created By" /> 
       <asp:BoundField    DataField="HOD_Remarks"    HeaderText="Remarks" />
                          <asp:TemplateField HeaderText="Approve" >
<ItemTemplate>

       <asp:Button ID="btnclosevent" Visible ="false"  style="background-color:red;color:white;" runat="server" CausesValidation="false" CommandName="closeevent"
                    Text="Approve" CommandArgument='<%# Eval("OpenEventID") %>' />
</ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Update" ItemStyle-BackColor ="green" ItemStyle-ForeColor="white" >
            <ItemTemplate >
        <asp:LinkButton  ID="lnkedit" runat="server" CausesValidation="False" 
                    CommandName="Edit" Text="Edit" ForeColor ="White" ></asp:LinkButton>

</ItemTemplate>
         <edititemtemplate>
         <asp:linkbutton id="btnUpdate" ForeColor ="White"  runat="server" commandname="Update" text="Update" />
         <asp:linkbutton id="btnCancel" ForeColor="White" runat="server" commandname="Cancel" text="Cancel" />
         </edititemtemplate>
</asp:TemplateField>

         <asp:CommandField ShowDeleteButton="true"  ItemStyle-BackColor ="red" ItemStyle-ForeColor="white" HeaderText="Delete"/>

         <asp:BoundField    DataField="Event_Close" ItemStyle-CssClass="Hide" HeaderStyle-CssClass="Hide"     HeaderText="Event_Close" />
         <asp:TemplateField ItemStyle-BackColor="Red"  ItemStyle-ForeColor ="White" HeaderText="Status" >
<ItemTemplate>
         <asp:Label ID="lblstatus"   runat="server"  ></asp:Label>
</ItemTemplate>
      </asp:TemplateField>

      </Columns>  
      <FooterStyle BackColor="White" ForeColor="#000066" />
      <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
      <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
      <RowStyle ForeColor="#000066" />
      <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
      <SortedAscendingCellStyle BackColor="#F1F1F1" />
      <SortedAscendingHeaderStyle BackColor="#007DBB" />
      <SortedDescendingCellStyle BackColor="#CAC9C9" />
      <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>

我要在已编辑的特定行上启动引导弹出日期时间日历。

Answer 1

我建议您为此使用特殊的库，例如： http://ui-grid.info/-用于创建表+更改模板（用于使用datetimepicker）+启用可编辑单元格属性

Answer 2

这似乎是带有引导日期选择器的CSS问题

由于您使用的是asp.net Gridview，因此AjaxControl Toolkit将是您的最佳选择

AjaxControl Toolkit包含CalenderExtendercontrol，其属性称为PopupPosition="BottomLeft"

如何在gridview行编辑中显示引导弹出日历？

2 个答案: