Mutually Exclusive CheckBox inside GridView
I was having a development requirement in which i have to implement CheckBoxes inside GridView.
Scenario is like, There is one TemplateColumn in GridView which is used to Select any Row within GridView. So, There will be CheckBox inside ItemTemplate of that TemplateColumn.
User would be able to select only one CheckBox (Mutually Exclusive) in that Column. If user select any other CheckBox in that Column, then Previously Selected CheckBox should be unchecked.
Here, I cant use RadioButton, as User should also be able to deselect the selected CheckBox, which is not possible with RadioButton.
To accomplish this scenario, we just need to attach a JavaScript function which traverse through all the "Input" elements of the Web Page form.
You will get all the elements by; var elm = document.getElementsByTagName('input');.
While Traversing the elements in a Loop; check for the ID of the current Traversing element with the ID of the selected CheckBox. We will pass the ID of the selected CheckBox in argument of the function.
Below is the GridView in my ASPX Page:
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>
There is a CheckBox TemplateColumn and we have to handle GridView_RowDataBound event handler to attach the JavaScript on "OnClick" event of the CheckBox.
Below is the Code Behind; where we are attaching the JavaScript on "OnClick" of CheckBox:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
try
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string strScript = "uncheckOthers(" + ((CheckBox)e.Row.Cells[0].FindControl("CheckBox1")).ClientID + ");";
((CheckBox)e.Row.Cells[0].FindControl("CheckBox1")).Attributes.Add("onclick", strScript);
}
}
catch (Exception Ex)
{
//report error
}
}
And Finally the JavaScript which consists the main functionality of Mutually Exclusive CheckBox:
<script type="text/javascript" language="javascript">
function uncheckOthers(id)
{
var elm = document.getElementsByTagName('input');
for(var i = 0; i < elm.length; i++)
{
if(elm.item(i).id.substring(id.id.lastIndexOf('_')) == id.id.substring(id.id.lastIndexOf('_')))
{
if( elm.item(i).type == "checkbox" && elm.item(i)!=id)
elm.item(i).checked = false;
}
}
}
</script>
This would compel the user to select only one CheckBox inside one perticular Column inside GridView. The code will work with more than one TemplateColumn with CheckBox inside GridView.
Hope it will help them who want to develop the functionality.