One Checkbox to control gridview rows - asp.net

Question

How can I implement the following: I would like to have a checkbox on the top of my gridview. When checkbox is checked should show all the hidden rows from the gridview but when is unchecked should only show the unhide ones.
I only need 1 checkbox at the top(not in the header of the gridview), I found couple of examples but all of the have checkbox as column and then added to the header as well.
What would be the best way to do this?
Thanks in advance.

Answer 1

This is a one way of doing it on the server:
I define the Gridview and Checkbox as follows:
<asp:CheckBox id="cbShowHidden" runat="server" Text="Show Hidden Rows"
Checked="true" oncheckedchanged="cbShowHidden_CheckedChanged" AutoPostBack="true" ></asp:CheckBox>
<br />
<asp:GridView ID="gvTest" AutoGenerateColumns="false" runat="server"
ShowHeader="true" onrowdatabound="gvTest_RowDataBound">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" />
<asp:BoundField DataField="name" HeaderText="name" />
<asp:BoundField DataField="family" HeaderText="family" />
<asp:BoundField DataField="visibility" HeaderText="visibility" />
</Columns>
</asp:GridView>
This is the codebehind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
PopulateGrid();
}
}
private void PopulateGrid()
{
gvTest.DataSource = Enumerable.Range(0, 3000).Select(i => new { id = i, name = 2 * i, family = "Unknown", visibility = i % 3 == 0 ? "Visible" : "Hidden" });
gvTest.DataBind();
}
protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e)
{
bool showHidden = cbShowHidden.Checked;
if (e.Row.RowType == DataControlRowType.DataRow)
e.Row.Visible = showHidden || string.Compare(e.Row.Cells[3].Text, "Visible") == 0;
}
protected void cbShowHidden_CheckedChanged(object sender, EventArgs e)
{
PopulateGrid();
}
This can be greatly optimized by doing the hiding on the client with jQuery.