C# – Filter the GridView Data based on Checkbox which is outside of GridView

asp.netcgridview

I have 5 check box on my page and a Grid view with Template Field, I am not using any bond field on page load I am binding the grid with all data of a table, I want to filter the data based on the check box check.

suppose: I have check box like A B C D. All check box are out side of Grid view. When user checked the check box A, then in Grid view, check box A related data should show, like wise for B C and D.

how do that?, Some one please give some example code and bit logic.

It would be great if I'll be able to filter the gridview without any postback.

Grid:

 <asp:GridView ID="GridView1" runat="server" 
                AutoGenerateColumns="False" CellPadding="3">
      <Columns>
          <asp:TemplateField HeaderText="ID" SortExpression="ID">
            <ItemTemplate>
              <asp:Label ID="lblId" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
           </ItemTemplate>                           
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Discription" SortExpression="Discription">
            <ItemTemplate>
              <asp:Label ID="lblDiscription" runat="server" Text='<%#Eval("Discription") %>'></asp:Label>
            </ItemTemplate>                        
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Address" SortExpression="Address">
            <ItemTemplate>
             <asp:Label ID="lblAddress" runat="server" Text='<%#Eval("Address") %>'></asp:Label>
            </ItemTemplate>
         </asp:TemplateField>
     </Columns>
 </asp:GridView>

Binding the Grid:

TestPageDao page1Dao = new TestPageDao ();

if (!IsPostBack)
{
  IList<TestDAO> TestDAO = page1Dao.GetAlldata();
  GridView1.DataSource = TestDAO;
  GridView1.DataBind();
}

I tried Filter gridview or http://forums.asp.net/p/1034014/2904713.aspx

Best Answer

If you want to avoid postback, uses jQuery like here: http://jquerybyexample.blogspot.com/2012/04/how-to-filter-gridview-records-using.html

An alternative is AJAX, but at the end of the story it is a postback-like approach.

Finally using postback you can do it in several ways by dynamically setting the GridView filter before the GridView loads. This can be achieved with the Page load event, the OnSelecting of the associated datasource (if any), or similar.

Here it is an extraction of the aspx:

<asp:CheckBox ID="CheckBox1" runat="server" Text="A" />
<asp:CheckBox ID="CheckBox2" runat="server" Text="B" />
<asp:CheckBox ID="CheckBox3" runat="server" Text="C" />
<asp:CheckBox ID="CheckBox4" runat="server" Text="D" />
<hr />

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
    DataSourceID="sqlDataSourceGridView" AutoGenerateColumns="False"
    CssClass="GridViewStyle" GridLines="None" Width="650px" >
    <Columns> 
        <asp:BoundField DataField="CompanyName" HeaderText="Company" ItemStyle-Width="200px" />
        <asp:BoundField DataField="ContactName" HeaderText="Name" ItemStyle-Width="125px"/>
        <asp:BoundField DataField="City" HeaderText="city" ItemStyle-Width="125px" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="125px" />
    </Columns>
</asp:GridView>

<asp:SqlDataSource ID="SqlDataSourceGridView" runat="server" 
    ConnectionString="<%$ ConnectionStrings:northWindConnectionString %>" 
    SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [City], [Country] FROM [Customers]" 
    OnSelecting="SqlDataSourceGridView_Selecting">
 <FilterParameters>
    <asp:ControlParameter ControlID="checkbox1" Name="CompanyName" PropertyName="Checked" ConvertEmptyStringToNull="false" />
 </FilterParameters>
</asp:SqlDataSource>

Note the OnSelecting event and note that there isn't any filter preset.

Now in the code behind set dynamically the filter:

protected void SqlDataSourceGridView_Selecting(object sender, SqlDataSourceSelectingEventArgs e) {
    SqlDataSourceGridView.FilterExpression = string.Empty;
    if (CheckBox1.Checked) {
        SqlDataSourceGridView.FilterExpression += "(CompanyName=1)";
    }
    if (CheckBox2.Checked) {
        if (!string.IsNullOrEmpty(SqlDataSourceGridView.FilterExpression)) SqlDataSourceGridView.FilterExpression += " OR ";
        SqlDataSourceGridView.FilterExpression += "(B=1)";
    }
    if (CheckBox3.Checked) {
        if (!string.IsNullOrEmpty(SqlDataSourceGridView.FilterExpression)) SqlDataSourceGridView.FilterExpression += " OR ";
        SqlDataSourceGridView.FilterExpression += "(C=1)";
    }
    if (CheckBox4.Checked) {
        if (!string.IsNullOrEmpty(SqlDataSourceGridView.FilterExpression)) SqlDataSourceGridView.FilterExpression += " OR ";
        SqlDataSourceGridView.FilterExpression += "(D=1)";
    }
}

If you don't like the OnSelecting event, you can do the same in the PageLoad:

protected void Page_Load(object sender, EventArgs e) {
    // here same code of above
    // . . .
}

I didn't test it so verify minor errors.

Related Topic