August 22, 2013

Gridview with Search and Highlight facility : Asp .Net

1 comments

     Hello, Today i will share code which provide facility for search data in grid view and how to highlight the searched result.  Instead of buying the third party controls this code provide easy way to do this.


here we can make CSS class which contain color code to highlight , two user define functions for the search text and for bind high light CSS class.  And on onrowcreate we can implement CSS of Onmouseover & Onmouseout for highlight row on which we have cursor.  and gridview operation is also covered using sqldatasource.

we just need to set some CSS ans JS call (very simple) and some code behind.


We are call two events of grid view to make this  

1.  OnRowCreated
2.  EditRowStyle-BackColor
3. user define function



How we can done this

1. Create CSS code for the row hover & highlight search result
                  First CSS code for Highlight , Second for highlight row on mouse hover
               
  <style type="text/css">
    .highlight {text-decoration: none;color:black;background:yellow;}
    </style>

  
 <style type="text/css">
   /*for gridview row hover, select etc*/
   .OnOut
    {
       background-color: white;
cursor:default;

    }
       
    .OnOver
     {
       background-color: #DDDDDD;
cursor:pointer;

     }
</style>


2. Code behind : for RowCreated event
                       This function set CSS classes on Row Create Event of gridview 

 protected void gridSample_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.className='OnOver'");
            e.Row.Attributes.Add("onmouseout", "this.className='OnOut'");
        }
    }


3. Two user define function for the high light and set/remove css class
                   first function defines how to  highlight text by string functions  ( not to worry for understand just put it in your code) and second to replaces words.

    public string HighlightText(string InputTxt)
    {
        string Search_Str = txt_catname.Text;

        // Setup the regular expression and add the Or operator.
        Regex RegExp = new Regex(Search_Str.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase);
        // Highlight keywords by calling the
        //delegate each time a keyword is found.
        return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
    }

    public string ReplaceKeyWords(Match m)
    {
        return ("" + m.Value + "");
    } 




you can download full example below just create table which i used  with describled field below :)

  • id      -  Int
  • name - varchar
  • city - varchar
  • salary - varchar     


Download example          

 ( if you find any problem , and get confused comment below)


1 comment:

  1. Dear sir ,
    can u help me olz....
    I want code for searching on grid view (column wise and combination of column wise) using jquery only(NOT WRITE THE CODE IN .NE T/ AJAX) .
    PLEASE HELP ME STEP BY STEP ORDER BECAUSE i am fresher

    ReplyDelete

COMMENT ON THIS OR GIVE ANY SUGGESTIONS & IDEAS