Filter the Data on GridView

Introduction

This article explains how to filter the data in a GridView.

Step 1

I first created a database with a few entries of some IT students. I named this database "Student", in this database I created a table named IT_Students. It's data is as follows:

Step 2

After this I created a new application in Visual Studio.

On this application I took a TextBox, a button and a Grid View as in the following:

<div>
Search User by Name:-
<asp:TextBox runat="server" ID="txt1"></asp:TextBox>
<br />
<asp:Button ID="btn1" runat="server" Text="Submit" OnClick="btn1_Click" />
</div>
<br />
<div>
<asp:Label ID="lbl1" runat="server" Enabled="false"></asp:Label>
<asp:GridView ID="grd" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>

Step 3

After this you need to bind the database to the GridView, on running the application the user will see all the data in the grid, for this I have provided the binding on the page load event.

protected void Page_Load(object sender, EventArgs e)
{
x = new SqlConnection(@"Data Source=MCNDESKTOP20\MCNDESKTOP20;
Initial Catalog=Student;Integrated Security=True");
x.Open();
SqlDataAdapter da = new SqlDataAdapter("select * from IT_Student", x);
DataSet ds = new DataSet();
da.Fill(ds);
grd.DataSource = ds;
grd.DataBind();
}

You can see that I had simply bound the GridView with the Database, so on running the application the GridView will show all the data available in the database.

Step 4

Now I will work on the button click event.

protected void btn1_Click(object sender, EventArgs e)
{
x = new SqlConnection(@"Data Source=MCNDESKTOP20\MCNDESKTOP20;
Initial Catalog=Student;Integrated Security=True");
x.Open();
SqlDataAdapter da = new SqlDataAdapter("select * from IT_Student where
Student_Name like '%" + txt1.Text + "%'", x);
DataSet ds = new DataSet();
da.Fill(ds);
grd.DataSource = ds;
grd.DataBind();
}

Here I had applied the filtering on SQL data, whatever the text is provided in the TextBox that will be used to filter the name of students, it will check the names from the start to the end and will provide all the names with the similar text.

Now our application is created and is ready for it's execution.

Output

On running the application you will see that the Grid has all the data available in the database.

filter data on grid

Now I will enter some text into the TextBox and then click on the button.

filter data on grid

You can see that all the names with the "an", whether at the start, in the middle or at the end, are available in the Grid.