添加行转换为可编辑的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(基思·伍德),并在这样的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控件code-背后:
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();
}
任何想法,为什么我的日历不弹出,一旦我添加新行的GridView的?
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>
相似:
<一href=\"http://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker\">Asp.Net在UpdatePanel的GridView的jQuery的DatePicker的结果
<一href=\"http://stackoverflow.com/questions/16226774/datepicker-for-dynamically-created-controls\">Datepicker动态创建的控件
这篇关于添加行转换为可编辑的GridView后日期选择器不显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!