Sunil Chaudhry Sunil Chaudhry - 22 days ago 7
C# Question

How to Highlight searched keyword in grid

I have a grid and a textbox, on textbox keyup I am filtering(searching) grid data. Its working.

Now I want to highlight the grid data with the text entered in textbox.

For highlighting I am using "jquery.highlight.js" library.

But its not working properly. Try to search 25 in textbox.

HTML:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<style type="text/css">
span.highlight {
background-color: #ffffaf;
}
</style>

<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="//raw.githubusercontent.com/bartaz/sandbox.js/master/jquery.highlight.js" type="text/javascript"></script>
<script type="text/javascript">

function Search_Gridview(strKey, strGV) {
var strData = strKey.value.toLowerCase().split(" ");
var tblData = document.getElementsByClassName(strGV)[0];
var rowData;
for (var i = 1; i < tblData.rows.length; i++) {
rowData = tblData.rows[i].innerHTML;
var styleDisplay = 'none';
for (var j = 0; j < strData.length; j++) {
if (rowData.toLowerCase().indexOf(strData[j]) >= 0) {
styleDisplay = '';
}else {
styleDisplay = 'none';
break;
}
}
tblData.rows[i].style.display = styleDisplay;
$('.mygrid').unhighlight();
$('.mygrid').highlight($(strData));
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<div style="font-family: Aharoni; text-align: center; font-size: 30px; margin: 20px;">
Search in GridView using JavaScript by Code Scratcher
</div>
<div style="border: 1px solid Black; width: 800px; padding: 20px; height: 350px; font-size: 20px;">
Search :
<asp:TextBox ID="txtSearch" runat="server" Font-Size="20px" onkeyup="Search_Gridview(this, 'mygrid')"></asp:TextBox><br />
<br />
<asp:GridView ID="gvTest" runat="server" CellPadding="10" Width="500px" CssClass="mygrid">
</asp:GridView>
</div>
</center>
</form>
</body>
</html>


Code Behind:

protected void Page_Load(object sender, EventArgs e)
{
//Columns Add To DataTable...
dt.Columns.Add("Id", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Age", typeof(int));
dt.Columns.Add("City", typeof(string));
//Rows Add To DataTable...
dt.Rows.Add(1, "Ved", 25, "HP");
dt.Rows.Add(2, "Sunil", 32, "HR");
dt.Rows.Add(3, "Billa Bhai", 23, "HR");
dt.Rows.Add(3, "OM", 25, "PB");
dt.Rows.Add(3, "Kalol", 28, "Surat");
//DataTable Bind To Gridview...
gvTest.DataSource = dt;
gvTest.DataBind();
}

Answer

I got the answer, below is the jquery function:-

 <script type="text/javascript">
        function Search_Gridview(strKey, strGV) {
            $('.mygrid').unhighlight();
            var strData = strKey.value.toLowerCase().split(" ");
            var tblData = document.getElementsByClassName(strGV)[0];
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0) {
                        styleDisplay = '';                  
                    }
                    else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
                //$('.mygrid').unhighlight();
                $('.mygrid').highlight($(strData));
            }
        }
    </script>
Comments