Set Focus for Checkbox List Item when it Selected on Postback in ASP.NET using JavaScript
Sometimes we might have requirement like to set the focus for selected item in Checkbox List. We can set the focus for selected item through the javascript.
In this article we discuss about how to find the data to Checkbox list and how to set the focus for selected item.
As shown below we will bind the datatable data to checkbox list and will call the javascript function on checkbox list select index changed event to set the focus.
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="AspNetSetFocus._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Set Focus for CheckboxList Item when any item selected</title>
<script type="text/javascript"">
function SetFocus(Id)
{
document.getElementById(Id).focus();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<div style="height:200px;overflow-y:scroll;width:200px;border:1px solid black;">
<asp:CheckBoxList ID="chkList" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="chkList_OnSelectedIndexChanged">
</asp:CheckBoxList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
default.aspx.cs
using System;
using System.Data;
using System.Web.UI;
namespace AspNetSetFocus
{
public partial class _default : System.Web.UI.Page
{
///<summary>
/// page load event
///</summary>
///<param name="sender"></param>
///<param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
///<summary>
/// bind the datatable to Checkbox List
///</summary>
private void BindData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Name");
for (int i = 0; i < 100; i++)
{
dt.Rows.Add(i.ToString(), "A" + i.ToString());
}
chkList.DataSource = dt;
chkList.DataValueField = "Id";
chkList.DataTextField = "Name";
chkList.DataBind();
}
///<summary>
/// checkbox list item selection event
///</summary>
///<param name="sender"></param>
///<param name="e"></param>
protected void chkList_OnSelectedIndexChanged(object sender, EventArgs e)
{
string sScript = "SetFocus('" + chkList.ClientID + "_" + chkList.SelectedIndex.ToString() + "');";
ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "focusScript", sScript, true);
}
}
}
As shown above we are calling the SetFocus() javascript function to set the focus by passing the checkbox list item id.
