Saturday, April 30, 2011

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;
         }
      }
     

No comments: