Wednesday, March 28, 2012

why Javascript doesnt work properly in updatepanel?

i wanna my gridview to change into editrow model by click any space in the row , so i wrote in the aspx page:

.....
<script type="text/javascript">
function ClickEvent(cId)
{
var id=cId;
document.getElementById("rowid").value=id;
document.getElementById("btnBindData").click();
}
</script>
.....

<asp:LinkButton ID="btnBindData" runat="server" OnClick="btnBindData_Click" Width="0px" style="width:0px; height:0px"></asp:LinkButton>
<input type="hidden" id="rowid" runat="server" /> //send clicked row index to editindex property

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="userName" HeaderText="userName" SortExpression="userName" />
<asp:BoundField DataField="userPassword" HeaderText="userPassword" SortExpression="userPassword" />
</Columns>
</asp:GridView>

In the aspx.cs file i wrote:

.......

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{

e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#dfe345'");

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");

e.Row.Attributes["style"] = "Cursor:hand";

e.Row.Attributes.Add("OnClick", "ClickEvent('" + e.Row.RowIndex + "')");

}
}

......

protected void btnBindData_Click(object sender, EventArgs e)
{
GridView1.EditIndex=Convert.Int32(this.rowid.Value);

.....

GridView1.DataBind();
}

It works well without UpdatePanel ,but when put the GridView in the UpdatePanel ,when I click the row, the GridView got disappeared.

Replace asp:LinkButton with asp:Button. If you want you can sorround your button with a hidden div (to hide from the user). Also add UseSubmitBehavior="false" to the asp:Button.

For example:

<div style="display: none; line-height: 0pt;">
<asp:Button id="btnBindData" runat="server" OnClick="btnBindData_Click" UseSubmitBehavior="false" />
</div>

No comments:

Post a Comment