将行添加到可编辑 gridview 后未出现日期选择器 [英] Datepicker not appearing after adding rows to editable gridview

问题描述

我有一个可编辑的 Gridview，列如下:

I have an editable Gridview with columns as below:

    <asp:TemplateField HeaderText="Date" >
        <ItemTemplate>
            <asp:TextBox ID="TextBox2" runat="server" Width="160" CssClass="DateTimePicker" ></asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Amt $">
        <ItemTemplate>
             <asp:TextBox ID="TextBox3" runat="server" Width="160"></asp:TextBox>
        </ItemTemplate>
        <FooterStyle HorizontalAlign="Right" />
        <FooterTemplate>
         <asp:Button ID="ButtonAdd" runat="server" Text="Add Stage" onclick="ButtonAdd_Click" />
        </FooterTemplate>
    </asp:TemplateField>
    </Columns>

如您所见，此 gridview 作为底部的按钮，允许用户向 gridview 添加行.

As you can see, this gridview as a button at the bottom which allows user to add rows to the gridview.

我想为我的日期列弹出一个日历，所以我使用了 jQuery (Keith Wood) 并像这样调用 JS 函数:

I want to have a calendar pop up for my Date column so I used jQuery (Keith Wood) and call on the JS function like this:

    $(function () {

                $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
            });

在我的 gridview 中，当我第一次单击日期文本框(第一行)时，日历会弹出.但是，一旦我在gridview中添加了一行，日历功能就不再出现了.

In my gridview, the first time when I click on the Date textbox (on first row), the calendar pops up. However, once I add a row to the gridview, the calendar function no longer appears.

这是我从代码隐藏向 gridview 添加新行的方式:

This is the way I add a new row to gridview from code-behind:

    private void AddNewRowToGrid()
    {
        int rowIndex = 0;

        if (ViewState["CurrentTable"] != null)
        {
            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
            DataRow drCurrentRow = null;
            if (dtCurrentTable.Rows.Count > 0)
            {
                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                {
                    //extract the TextBox values
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");
                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");
                    TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");


                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["RowNumber"] = i + 1;

                    dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
                    dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
                    dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;

                    rowIndex++;
                }
                dtCurrentTable.Rows.Add(drCurrentRow);
                ViewState["CurrentTable"] = dtCurrentTable;

                Gridview1.DataSource = dtCurrentTable;
                Gridview1.DataBind();
            }
        }
        else
        {
            Response.Write("ViewState is null");
        }

        //Set Previous Data on Postbacks
        SetPreviousData();
    }

有什么想法为什么我的日历在向 gridviews 添加新行后不弹出?

Any ideas why my calendar does not pop up once I add new rows to the gridviews?

干杯！

推荐答案

发生这种情况的唯一情况是在您使用 UpdatePanel 时.

The only case that this happens is when you use UpdatePanel.

现在，当您使用 UpdatePanel 时，每个 UpdatePanel 上的 Dom 都会发生变化，并且 javascript 需要重新初始化.现在，在您的情况下，您添加了新行，并进行了 ajax 更新，因此您需要重新初始化日期选择器.

Now when you use UpdatePanel, on each UpdatePanel the Dom is change and the javascript need re-initializations. Now in your case you add new lines, and you make ajax update, so you need to re-initialize the date picker.

这可以通过 UpdatePanel 附带的函数来完成:

This can be done from the functions that come with UpdatePanel as:

<script type="text/javascript"> 
   // when dom is ready we initialize the UpdatePanel requests
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker           
       $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    });        

    function InitializeRequest(sender, args) {
       // make unbind before update the dom, to avoid memory leaks.
       $('.DateTimePicker').unbind();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    }
</script>

类似:Gridview Jquery DatePicker 中的 Asp.Net UpdatePanel
动态创建控件的日期选择器

这篇关于将行添加到可编辑 gridview 后未出现日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！