Sarch Panel inside the grid

This solution used JavaScript and HTML Markup:

/* Functionality: Assign the values in hidden filed  now w e can use hiddenfield valus in server side code*/

function UpdateGrid(){

     $('input[type=hidden][id$=HiddenFieldSColumn1]').val($('input[type=text][id=grvTestColumn1]').val());

    /*HiddenFieldColumn2 grvTestColumn2*/

    $('input[type=hidden][id$=HiddenFieldColumn2]').val($('input[type=text][id=grvTestColumn2]').val());

    /*HiddenFieldSPEtternavn GVSPEmployeeEtternavn*/

   

        if($('input[id$=ButtonSearchHiddenEventHandler]').length > 0)

        {

            $('input[id$=ButtonSearchHiddenEventHandler]')[0].click();

        }

    }

$(document).ready(

/*Functionality: 1)Create & append search panel inside the grid, 2)Assign values in textbox, */

function AddSearchPanel()

{

/*Add the search panel in grid*/

$('table[id$=grvTest] tr:first').after("<tr style='background-color:red;height:10px;'><td style='width:30px'>&nbsp;</td>                        

<td><input type='text' maxLength='1'  id='grvTestColumn1' onchange='UpdateGrid();'  onkeyup='SetDefalutButtonSearchPanel(event); '  style='height:15px;width:30px;font-size:12px' /></td>            <td><input type='text'                     id='grvTestColumn2' onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:50px;font-size:12px' /></td>        <td><input type='text'                   id='GVSPEmployeeEtternavn'  onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:80px;font-size:12px' /></td>         <td><input type='text'                       id='GVSPEmployeeFornavn'  onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:80px;font-size:12px' /></td>           <td style='width:100px'>   &nbsp;</td>                                                                                                                   <td><input type='text' maxLength='20' id='GVSPEmployeeResourceType' onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:100px;font-size:12px' /></td>        <td><input type='text'                   id='GVSPEmployeeAdresse'  onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:80px;font-size:12px' /></td>           <td><input type='text'                   id='GVSPEmployeePostnr'  onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:50px;font-size:12px' /></td>            <td><input type='text'                   id='GVSPEmployeePoststed'  onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:100px;font-size:12px' /></td>          <td><input type='text'                   id='GVSPEmployeeTlfnr'  onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:60px;font-size:12px' /></td>             <td><input type='text'                   id='GVSPEmployeeMobilnr'  onchange='UpdateGrid();' onkeyup='SetDefalutButtonSearchPanel(event); ' style='height:15px;width:60px;font-size:12px' /></td>           <td style='width:100px'><img id='imgRefreshGridSearchPanel' onclick='ResetSearchPanel()' src='../Images/Refresh.gif' border='0' alt='reset' style='cursor:pointer' title='Refresh Q.B.E'></img></td>                                                                                                                                    <td style='width:20px'>&nbsp;</td>                                                </tr>");

/*Assign the values in search panel. Show the values of hidden values in text box*/

$('input[type=text][id=grvTestColumn1]').val($('input[type=hidden][id$=HiddenFieldSColumn1]').val());

$('input[type=text][id=grvTestColumn2]').val($('input[type=hidden][id$=HiddenFieldColumn2]').val());

});

/*Functionality: This function is used for reset the controls on Grid Search PanelCreated*/

function ResetSearchPanel()

{

    $('table[id$=grvTest]').find('input[type=text]').each(function(index)

    {

    $(this).val('');

    });

    $('td[id$=tdHiddenFieldContainer').find('input[type=hidden]').each(function (index)

    {

    $(this).val('');

    });

    

    UpdateGrid();

}

 /*Created for set the title of version information on user title bar.*/

      $(document).ready(

        function ShowCurrentVersion()

        {RefreshCountPanel();}

         );/* End of document ready funciton*/

  

    /*Functionality; This function is used for handel enter key evetn on Search Panel  inside the grid */

     function SetDefalutButtonSearchPanel(e)

      { 

         var evt = e ? e : window.event;

         if (evt.keyCode == 13)/*Search if user hit enter key*/

         {

           UpdateGrid();

           return false;

         }

      }

     

search panel inside the grid

I have to add textbox on top row inside the grid. and when end user insert the search value than grid result should be populated accordingly.

But how i can add text box only on top row. CSS of grid does not allow me to add text boxes on header. my grid should look like this

Header: Emp# EmpName EmpAddd
Search TextBox : [_____] [_____] [______]
Lable show data : 1 aaa adress1
Lable show data : 2 bbb adress2
Lable show data : 3 ccc adress3

Search is not my problem but how i can add text box only for top row in grid view. I can not add always text box and give the look n feel of other text box as label.


SOLUTION:


1) READ THE  html markup of grid. 
create same row and add search textboxes in the td on document.ready function


2)Attach search function on change event for the all search textboxes call it function FilterGrid.


3) on FilterGrid set the value of search textboxes in hidden field.

4) call clcik event on filterGrid function and now on C# code behind get the values from hidden fields and filter the gird datasoruce.

5)when page again render than search panel will set again on document.ready function.

5A) if you are using update panel than call same function on update panels event's refresh or load funtion.


Also can add search panel in gridview in server side (C#):



 protected void GVtest_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        { 
            //Create the Row
            GridViewRow row = new GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal);
            //Add the two Columns
            if(e.Row.RowIndex == 1)
            row.Cells.AddRange(CreateSarchPanel());
            //get a reference to the table that holds this row
            Table gridviweTable = (e.Row.Parent as Table);
            //Add the row at 0 indx.
            gridviweTable.Rows.AddAt(0, row);
       }
           
        }
    private TableCell[] CreateSarchPanel()
    {


        TableCell[] cells = new TableCell[2];
        TableCell cell;
        TextBox tb = new TextBox();
        tb.ID = "TextBoxSearchCriteria1";
        //The first column
        cell = new TableCell();
        tb = new TextBox();
        cell.Controls.Add(tb);
        cells[0] = cell;


        //The second column
        cell = new TableCell();
        TextBox tb2 =  new TextBox();
        tb2.ID = "TextBoxSearchCriteria2";
        cell.Controls.Add(tb2);
        cells[1] = cell;


        return cells;
    }