DataGrid ButtonColumn Focus Prob

  • Thread starter Thread starter Gary
  • Start date Start date
G

Gary

The first column in my data grid is a Delete Button column. For some reason
the delete button in the first row of the datagrid gets focus for the entire
page. If the user hits the enter key when anywhere on the page, it pushes
this button and the record gets deleted.

Is there any way to remove this focus?
Thanks,
G
 
Hi Gary,

Thanks for posting here. From your description, you used a webform datagrid
which has a Delete Buttom column(use PushButton), you put the button column
as the first column in the DataGrid. However, when running the page you
found the
first row of the datagrid's delete button always be set focus which cause
any hit on the "enter" key cause the delete button
be fired ,yes?

As for this problem, it's a known issue of the IE, the first submit button
on the page will be set focus by default. Regarding on your scenario, I
think here are two means to workaround this problem:
1. Use the LinkButton as the "delete" button column, thus the linkbutton
won't be set focus by default.

2. Add a ASP.NET Server Button before the datagrid. Make its width and
heigth as "1" so that it can hardly be noticed by user. Also, we can add
some code to cancel its submit event when user hit "enter" key, such as:
<asp:Button id="btnFocus" runat="server" Height="1px"
Width="1px"></asp:Button>
in code behind add the following code to add clientside click evernt for
the button to cancel the submit event:
btnFocus.Attributes.Add("onclick","return false;");

To make it clearly, here is a demo page I tested on my side, please refer
to it if you have any thing unclear:

------------------------aspx page-------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>ButtonGrid</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<asp:Button id="btnFocus" runat="server" Height="1px"
Width="1px"></asp:Button>
</td>
</tr>
<tr>
<td>
<asp:DataGrid id="dgMain" runat="server" AutoGenerateColumns="False"
ShowHeader="False">
<Columns>
<asp:ButtonColumn Text="Delete" ButtonType="PushButton"
CommandName="Delete"></asp:ButtonColumn>
<asp:BoundColumn DataField="index"></asp:BoundColumn>
<asp:BoundColumn DataField="name"></asp:BoundColumn>
<asp:BoundColumn DataField="deleteable"></asp:BoundColumn>
</Columns>
</asp:DataGrid></td>
</tr>
</table>
</form>
</body>
</HTML>
-------------------code behind page class----------------
public class ButtonGrid : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button btnFocus;
protected System.Web.UI.WebControls.DataGrid dgMain;

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
BindGrid();
}
btnFocus.Attributes.Add("onclick","return false;");
}

protected void BindGrid()
{
DataTable tb = new DataTable();
tb.Columns.Add("index");
tb.Columns.Add("name");
tb.Columns.Add("deleteable",typeof(bool));

DataRow dr = null;
bool[] flags = {true,false};
for(int i=1;i<=10;++i)
{
dr = tb.NewRow();
dr["index"] = i.ToString();
dr["name"] = "Name" + i.ToString();
dr["deleteable"] = flags[i%2];

tb.Rows.Add(dr);
}

dgMain.DataSource = tb;
dgMain.DataBind();

}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.btnFocus.Click += new System.EventHandler(this.btnFocus_Click);
this.dgMain.DeleteCommand += new
System.Web.UI.WebControls.DataGridCommandEventHandler(this.dgMain_DeleteComm
and);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void dgMain_DeleteCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
Response.Write("<br>Item" + e.Item.ItemIndex + " is deleted!");
}

private void btnFocus_Click(object sender, System.EventArgs e)
{
Response.Write("<br>Button is clicked at: " +
DateTime.Now.ToLongTimeString());
}
}
--------------------------------------------------------------


Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx
 
Steven,
Thanks for the help. I'll use one of those workarounds.
Gary

Steven Cheng said:
Hi Gary,

Thanks for posting here. From your description, you used a webform datagrid
which has a Delete Buttom column(use PushButton), you put the button column
as the first column in the DataGrid. However, when running the page you
found the
first row of the datagrid's delete button always be set focus which cause
any hit on the "enter" key cause the delete button
be fired ,yes?

As for this problem, it's a known issue of the IE, the first submit button
on the page will be set focus by default. Regarding on your scenario, I
think here are two means to workaround this problem:
1. Use the LinkButton as the "delete" button column, thus the linkbutton
won't be set focus by default.

2. Add a ASP.NET Server Button before the datagrid. Make its width and
heigth as "1" so that it can hardly be noticed by user. Also, we can add
some code to cancel its submit event when user hit "enter" key, such as:
<asp:Button id="btnFocus" runat="server" Height="1px"
Width="1px"></asp:Button>
in code behind add the following code to add clientside click evernt for
the button to cancel the submit event:
btnFocus.Attributes.Add("onclick","return false;");

To make it clearly, here is a demo page I tested on my side, please refer
to it if you have any thing unclear:

------------------------aspx page-------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>ButtonGrid</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<asp:Button id="btnFocus" runat="server" Height="1px"
Width="1px"></asp:Button>
</td>
</tr>
<tr>
<td>
<asp:DataGrid id="dgMain" runat="server" AutoGenerateColumns="False"
ShowHeader="False">
<Columns>
<asp:ButtonColumn Text="Delete" ButtonType="PushButton"
CommandName="Delete"></asp:ButtonColumn>
<asp:BoundColumn DataField="index"></asp:BoundColumn>
<asp:BoundColumn DataField="name"></asp:BoundColumn>
<asp:BoundColumn DataField="deleteable"></asp:BoundColumn>
</Columns>
</asp:DataGrid></td>
</tr>
</table>
</form>
</body>
</HTML>
-------------------code behind page class----------------
public class ButtonGrid : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button btnFocus;
protected System.Web.UI.WebControls.DataGrid dgMain;

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
BindGrid();
}
btnFocus.Attributes.Add("onclick","return false;");
}

protected void BindGrid()
{
DataTable tb = new DataTable();
tb.Columns.Add("index");
tb.Columns.Add("name");
tb.Columns.Add("deleteable",typeof(bool));

DataRow dr = null;
bool[] flags = {true,false};
for(int i=1;i<=10;++i)
{
dr = tb.NewRow();
dr["index"] = i.ToString();
dr["name"] = "Name" + i.ToString();
dr["deleteable"] = flags[i%2];

tb.Rows.Add(dr);
}

dgMain.DataSource = tb;
dgMain.DataBind();

}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.btnFocus.Click += new System.EventHandler(this.btnFocus_Click);
this.dgMain.DeleteCommand += new
System.Web.UI.WebControls.DataGridCommandEventHandler(this.dgMain_DeleteComm
and);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void dgMain_DeleteCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
Response.Write("<br>Item" + e.Item.ItemIndex + " is deleted!");
}

private void btnFocus_Click(object sender, System.EventArgs e)
{
Response.Write("<br>Button is clicked at: " +
DateTime.Now.ToLongTimeString());
}
}
--------------------------------------------------------------


Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx
 
Back
Top