There are many ways to filter database data using an ASP.NET control and display it in a Grid view.

In this article we will work with a RadioButton, Textbox and CheckBox control.

Step 1

Create an EmployeeDB table in a SQL database.

Example:

  1. create table EmployeeDB
  2. (
  3. EmpID int primary key identity(1,1),
  4. EmpName varchar(20),
  5. EmpGender varchar(10),
  6. EmpDOB date null,
  7. EmpDepartment varchar(20)
  8. )

Create EmployeeDB Table

Step 2

The following are some Employee data records to be inserted into the EmployeeDB table.

  1. insert into EmployeeDB values('Rakesh','Male','1986-05-11','Development')
  2. insert into EmployeeDB values('Karan','Male','1987-06-19','Account')
  3. insert into EmployeeDB values('Priya','Female','1987-05-01','Account')
  4. insert into EmployeeDB values('Anita','Female','1988-02-21','Tax Department')
  5. insert into EmployeeDB values('Aman','Male','1986-05-10','Development')
  6. insert into EmployeeDB values('Kavita','Female','1986-05-11','Tax Department')
  7. insert into EmployeeDB values('Ramesh','Male','1978-09-14','Mathematical')
  8. insert into EmployeeDB values('Mahi','Female','1989-05-11','Mathematical')

Insert in EmployeeDB

Step 3

Now go to your project design (.aspx) page.

Add a new web form using a Master Page.

Add new web form

Step 4

How to fill in the GridView from the database using Radio Button, Textbox, and Check Box controls one by one.

Radio Button Control

Fill GridView Data Using Radio Button Control:

After providing your radio button id and defining a ListItem.

  1. <asp:RadioButtonList runat="server" ID="rdGender" AutoPostBack="true"
  2. onselectedindexchanged="rdGender_SelectedIndexChanged">
  3. <asp:ListItem Selected="True">None</asp:ListItem>
  4. <asp:ListItem>Male</asp:ListItem>
  5. <asp:ListItem>Female</asp:ListItem>
  6. </asp:RadioButtonList>

Step 5

Add a Grid View to your form as in the following:

  1. <asp:GridView runat="server" ID="GridEmpRecord" AutoGenerateColumns="false">
  2. <Columns>
  3. <asp:TemplateField HeaderText="Name">
  4. <ItemTemplate><%#Eval("EmpName")%></ItemTemplate>
  5. </asp:TemplateField>
  7. <asp:TemplateField HeaderText="Gender">
  8. <ItemTemplate><%#Eval("EmpGender")%></ItemTemplate>
  9. </asp:TemplateField>
  11. <asp:TemplateField HeaderText="Birth Date">
  12. <ItemTemplate><%#Eval("EmpDOB")%></ItemTemplate>
  13. </asp:TemplateField>
  15. <asp:TemplateField HeaderText="Department">
  16. <ItemTemplate><%#Eval("EmpDepartment")%></ItemTemplate>
  17. </asp:TemplateField>
  18. </Columns>
  19. </asp:GridView>

Step 6

Now go to the Page Design Side and Page Code side.

Here write code for the Grid View data record bind with Radio Button List Control. This code is written inside the Radio Button onselectedindexchanged event.

Now here hive all the code for the Grid View bind using Radio Button list.

The following is the Page Design Side:

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="FilterGridviewData.aspx.cs" Inherits="Test_WebApplication.BlogWork.FilterGridviewData" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  3. </asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  6. <asp:RadioButtonList runat="server" ID="rdGender" AutoPostBack="true"
  7. onselectedindexchanged="rdGender_SelectedIndexChanged">
  8. <asp:ListItem Selected="True">None</asp:ListItem>
  9. <asp:ListItem>Male</asp:ListItem>
  10. <asp:ListItem>Female</asp:ListItem>
  11. </asp:RadioButtonList>
  12. <br />
  13. <br />
  14. <asp:GridView runat="server" ID="GridEmpRecord" AutoGenerateColumns="false">
  15. <Columns>
  16. <asp:TemplateField HeaderText="Name">
  17. <ItemTemplate><%#Eval("EmpName")%></ItemTemplate>
  18. </asp:TemplateField>
  20. <asp:TemplateField HeaderText="Gender">
  21. <ItemTemplate><%#Eval("EmpGender")%></ItemTemplate>
  22. </asp:TemplateField>
  24. <asp:TemplateField HeaderText="Birth Date">
  25. <ItemTemplate><%#Eval("EmpDOB")%></ItemTemplate>
  26. </asp:TemplateField>
  28. <asp:TemplateField HeaderText="Department">
  29. <ItemTemplate><%#Eval("EmpDepartment")%></ItemTemplate>
  30. </asp:TemplateField>
  31. </Columns>
  32. </asp:GridView>
  33. </asp:Content>
The following is the page side code side:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  9. using System.Configuration;
  11. namespace Test_WebApplication.BlogWork
  12. {
  13. public partial class FilterGridviewData : System.Web.UI.Page
  14. {
  15. //define connection string for connect database
  16. string conString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
  17. protected void Page_Load(object sender, EventArgs e)
  18. {
  20. }
  21. protected void rdGender_SelectedIndexChanged(object sender, EventArgs e)
  22. {
  23. using (SqlConnection con = new SqlConnection(conString))
  24. {
  25. {
  26. using (SqlCommand cmd = new SqlCommand("select * from EmployeeDB where EmpGender='" + rdGender.SelectedItem + "'"))
  27. {
  28. SqlDataAdapter dt = new SqlDataAdapter();
  29. try
  30. {
  31. cmd.Connection = con;
  32. con.Open();
  33. dt.SelectCommand = cmd;
  35. DataTable dTable = new DataTable();
  36. dt.Fill(dTable);
  38. GridEmpRecord.DataSource = dTable;
  39. GridEmpRecord.DataBind();
  40. }
  41. catch (Exception)
  42. {
  43. //
  44. }
  45. }
  46. }
  47. }
  48. }
  49. }
  50. }
Now finally run your page and display the Employee table record in the Grid View with Employee Gender by category.
  • Screen 1: Display Male Record

    Display Male Record

  • Screen 2: Display Female Record

    Display Female Record

Textbox Control

Now to fill in the GridView data using Textbox Control.

Now search from the Employee Data by Employee Name and display the GridView.

In this example use a GridView control to display a database record, textbox control and button control for searching for a database record.

  1. <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
Add a Search Button control to get a textbox data record from the database table as in the following:
  1. <asp:Button runat="server" ID="btnFind" Text="Find Employee" onclick="btnFind_Click" />
The following is the Page Design side:
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="FilterGridviewData.aspx.cs" Inherits="Test_WebApplication.BlogWork.FilterGridviewData" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  3. </asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  6. <asp:RadioButtonList runat="server" ID="rdGender" AutoPostBack="true"
  7. onselectedindexchanged="rdGender_SelectedIndexChanged">
  8. <asp:ListItem Selected="True">None</asp:ListItem>
  9. <asp:ListItem>Male</asp:ListItem>
  10. <asp:ListItem>Female</asp:ListItem>
  11. </asp:RadioButtonList>
  12. <br />
  14. Employee Record Search with Name : <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
  15. <asp:Button runat="server" ID="btnFind" Text="Find Employee"
  16. onclick="btnFind_Click" />
  17. <br />
  18. <br />
  19. <asp:GridView runat="server" ID="GridEmpRecord" AutoGenerateColumns="false">
  20. <Columns>
  21. <asp:TemplateField HeaderText="Name">
  22. <ItemTemplate><%#Eval("EmpName")%></ItemTemplate>
  23. </asp:TemplateField>
  25. <asp:TemplateField HeaderText="Gender">
  26. <ItemTemplate><%#Eval("EmpGender")%></ItemTemplate>
  27. </asp:TemplateField>
  29. <asp:TemplateField HeaderText="Birth Date">
  30. <ItemTemplate><%#Eval("EmpDOB")%></ItemTemplate>
  31. </asp:TemplateField>
  33. <asp:TemplateField HeaderText="Department">
  34. <ItemTemplate><%#Eval("EmpDepartment")%></ItemTemplate>
  35. </asp:TemplateField>
  36. </Columns>
  37. </asp:GridView>
  38. </asp:Content>
The following is the Page Code side:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  9. using System.Configuration;
  11. namespace Test_WebApplication.BlogWork
  12. {
  13. public partial class FilterGridviewData : System.Web.UI.Page
  14. {
  15. //define connection string for connect database
  16. string conString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
  17. protected void Page_Load(object sender, EventArgs e)
  18. {
  20. }
  22. protected void btnFind_Click(object sender, EventArgs e)
  23. {
  24. using (SqlConnection con = new SqlConnection(conString))
  25. {
  26. {
  27. using (SqlCommand cmd = new SqlCommand("select * from EmployeeDB where EmpName = '" + txtName.Text + "'"))
  28. {
  29. SqlDataAdapter dt = new SqlDataAdapter();
  30. try
  31. {
  32. cmd.Connection = con;
  33. con.Open();
  34. dt.SelectCommand = cmd;
  36. DataTable dTable = new DataTable();
  37. dt.Fill(dTable);
  39. GridEmpRecord.DataSource = dTable;
  40. GridEmpRecord.DataBind();
  41. }
  42. catch (Exception)
  43. {
  44. //
  45. }
  46. }
  47. }
  48. }
  49. }
  50. }
  51. }
In this example we find the employee name using textbox and button controls.

Here, finally search for a name using a textbox.

search name using textbox

Checkbox Control

Now to fill in the GridView data using a Checkbox Control.

Now GridView fill with Checkbox control. Take a checkbox list as in the following:
  1. <asp:CheckBoxList runat="server" ID="chkDepartment" >
  2. </asp:CheckBoxList>
In this example the GridView data will be filled in with the Employee by department.

First see the Page Design side as in the following design code:
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="FilterGridviewData.aspx.cs" Inherits="Test_WebApplication.BlogWork.FilterGridviewData" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  3. </asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  6. <asp:CheckBoxList runat="server" ID="chkDepartment" AutoPostBack="true"
  7. onselectedindexchanged="chkDepartment_SelectedIndexChanged">
  8. <asp:ListItem>Development</asp:ListItem>
  9. <asp:ListItem>Account</asp:ListItem>
  10. <asp:ListItem>Tax Department</asp:ListItem>
  11. <asp:ListItem>Mathematical</asp:ListItem>
  12. </asp:CheckBoxList>
  13. <br />
  14. <asp:GridView runat="server" ID="GridEmpRecord" AutoGenerateColumns="false">
  15. <Columns>
  16. <asp:TemplateField HeaderText="Name">
  17. <ItemTemplate><%#Eval("EmpName")%></ItemTemplate>
  18. </asp:TemplateField>
  20. <asp:TemplateField HeaderText="Gender">
  21. <ItemTemplate><%#Eval("EmpGender")%></ItemTemplate>
  22. </asp:TemplateField>
  24. <asp:TemplateField HeaderText="Birth Date">
  25. <ItemTemplate><%#Eval("EmpDOB")%></ItemTemplate>
  26. </asp:TemplateField>
  28. <asp:TemplateField HeaderText="Department">
  29. <ItemTemplate><%#Eval("EmpDepartment")%></ItemTemplate>
  30. </asp:TemplateField>
  31. </Columns>
  32. </asp:GridView>
  33. </asp:Content>
The following is the Page Code side:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  9. using System.Configuration;
  11. namespace Test_WebApplication.BlogWork
  12. {
  13. public partial class FilterGridviewData : System.Web.UI.Page
  14. {
  15. //define connection string for connect database
  16. string conString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
  17. protected void Page_Load(object sender, EventArgs e)
  18. {
  20. }
  22. protected void chkDepartment_SelectedIndexChanged(object sender, EventArgs e)
  23. {
  24. using (SqlConnection con = new SqlConnection(conString))
  25. {
  26. {
  27. using (SqlCommand cmd = new SqlCommand("select * from EmployeeDB where EmpDepartment='" + chkDepartment.SelectedItem + "'"))
  28. {
  29. SqlDataAdapter dt = new SqlDataAdapter();
  30. try
  31. {
  32. cmd.Connection = con;
  33. con.Open();
  34. dt.SelectCommand = cmd;
  36. DataTable dTable = new DataTable();
  37. dt.Fill(dTable);
  39. GridEmpRecord.DataSource = dTable;
  40. GridEmpRecord.DataBind();
  41. }
  42. catch (Exception)
  43. {
  44. //
  45. }
  46. }
  47. }
  48. }
  49. }
  51. }
  52. }
Now see the GridView data display using department check list.
  • Screen 1: The following is the result displayed by Development Department.

    Result Display by Development

  • Screen 2: Again GridView data filled iin using Tex Department.

    Gridview Data Fill using Tex Department

Finally I hope you understand how to work with a GridView with a Radio Button, Textbox and Checkbox.