Hi lingers,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.highlight {
text-decoration: none;
color: black;
background: yellow;
}
#Footer {
height: 22px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.tablesorter-2.0.3.js"></script>
<link type="text/css" rel="stylesheet" href="Scripts/style1.css" />
<script type="text/javascript">
jQuery(document).ready(function () {
$("#Gridview2").tablesorter({
debug: false,
widgets: ['zebra'],
sortList: [[0, 0]]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="Frame" style="width: 100%; max-height: 500px; margin: 0px; padding: 0px;">
<div id="Header"
style="border-style: none; border-color: inherit; border-width: 1px; width: 100%; height: 109px;">
<table width="100%" cellpadding="0px" cellspacing="0px" border="0"
style="font-family: 'Bodoni MT Black'">
<tr>
<td>
<div id="logo" style="margin-left: 10px">
<img alt="SearchNSortGrid" src="Excelasoft.png" />
</div>
</td>
<td>
<div style="top: 0px; width: auto; font-size: xx-large; font-style: normal; font-variant: normal; text-transform: capitalize; color: #3333CC;">Searching And Sorting in Gridview Control</div>
</td>
</tr>
</table>
</div>
<div id="Separation" style="width: 100%; height: 5px; background-color: #000000;"></div>
<div id="Content" style="min-height: 200px; overflow: auto">
<table width="100%" height="300px" border="0px" cellpadding="0" cellspacing="0"
frame="void">
<tr>
<td></td>
<td>Search:
<asp:TextBox ID="txtSearch"
runat="server" OnTextChanged="txtSearch_TextChanged" Height="20px"
Width="208px" />
</td>
<td></td>
</tr>
<tr>
<td> </td>
<td valign="top">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="Gridview2" runat="server" AutoGenerateColumns="False" AllowPaging="True"
AllowSorting="True" DataSourceID="dsGridview" Width="540px" CssClass="yui"
PageSize="5" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Id" SortExpression="EmployeeID"
ItemStyle-Width="40px" ItemStyle-HorizontalAlign="Center" InsertVisible="False" ReadOnly="True">
<ItemStyle HorizontalAlign="Center" Width="40px" />
</asp:BoundField>
<asp:BoundField DataField="FirstName" HeaderText="First" SortExpression="LastName" />
<asp:BoundField DataField="LastName" HeaderText="Last" SortExpression="LastName" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="130px" SortExpression="City">
<ItemStyle Width="130px" />
</asp:BoundField>
<asp:BoundField DataField="Country" HeaderText="Location" ItemStyle-Width="130px" SortExpression="Country">
<ItemStyle Width="130px" />
</asp:BoundField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<asp:SqlDataSource ID="dsGridview" runat="server"
ConnectionString="<%$ ConnectionStrings:constr %>"
SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [City], [Country] FROM [Employees]"
FilterExpression="FirstName LIKE '%{0}%' or LastName LIKE '%{1}%'">
<FilterParameters>
<asp:ControlParameter Name="FirstName" ControlID="txtSearch" PropertyName="Text" />
<asp:ControlParameter Name="LastName" ControlID="txtSearch" PropertyName="Text" />
</FilterParameters>
</asp:SqlDataSource>
</td>
<td></td>
</tr>
</table>
</div>
<div id="Footer"
style="color: #FFFFFF; font-family: 'Times New Roman', Times, serif; font-size: small; font-weight: normal; background-color: #000000; text-align: center; vertical-align: middle; word-spacing: normal; letter-spacing: normal;">
@ 2011.All Rights Reserved.
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Text.RegularExpressions;
VB.Net
Imports System.Text.RegularExpressions
Code
C#
string SearchString = "";
protected void Page_Load(object sender, EventArgs e)
{
txtSearch.Attributes.Add("onkeyup", " setTimeout(function () { __doPostBack('<%=txtSearch.ClientID %>','') }, 100);");
if (!IsPostBack)
{
Gridview2.DataBind();
}
}
protected void txtSearch_TextChanged(object sender, EventArgs e)
{
SearchString = txtSearch.Text;
txtSearch.Text = SearchString;
}
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[1].Text = Regex.Replace(e.Row.Cells[1].Text, txtSearch.Text.Trim(), delegate (Match match)
{
return string.Format("<span class='highlight'>{0}</span>", match.Value);
}, RegexOptions.IgnoreCase);
e.Row.Cells[2].Text = Regex.Replace(e.Row.Cells[2].Text, txtSearch.Text.Trim(), delegate (Match match)
{
return string.Format("<span class='highlight'>{0}</span>", match.Value);
}, RegexOptions.IgnoreCase);
}
}
VB.Net
Private SearchString As String = ""
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
txtSearch.Attributes.Add("onkeyup", " setTimeout(function () { __doPostBack('<%=txtSearch.ClientID %>','') }, 100);")
If Not IsPostBack Then
Gridview2.DataBind()
End If
End Sub
Protected Sub txtSearch_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
SearchString = txtSearch.Text
txtSearch.Text = SearchString
End Sub
Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Cells(1).Text = Regex.Replace(e.Row.Cells(1).Text, txtSearch.Text.Trim(),
Function(match As Match) String.Format("<span class='highlight'>{0}</span>", match.Value),
RegexOptions.IgnoreCase)
End If
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Cells(2).Text = Regex.Replace(e.Row.Cells(2).Text, txtSearch.Text.Trim(),
Function(match As Match) String.Format("<span class='highlight'>{0}</span>", match.Value),
RegexOptions.IgnoreCase)
End If
End If
End Sub
Screenshot