Search ToolBar

Search toolbar is the functionality to show filtering top row directly below the header of the grid (as opposed to separate search dialog). To enable this functionality, set the ToolBarSettings.ShowSearchToolBar property to true.

<trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1">
    <ToolBarSettings ShowSearchToolBar="true"/>
</trirand:JQGrid>

The default filtering operation for search toolbar is SearchOperation.Contains. To change that, set the Column.SearchToolBarOperation to the operation you need.

<trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1" Width="600px" >
   <Columns>                
      <trirand:JQGridColumn DataField="ShipName" SearchToolBarOperation="Contains" />
      <trirand:JQGridColumn DataField="ShipCity" SearchToolBarOperation="IsEqualTo" />                
   </Columns>
</trirand:JQGrid>

When a column is searchable, you can select how end-users will edit it. This is controlled by the Column.SearchType property and current has two different options - TextBox and DropDown.

In addition to that, you can specify the values end-users will see in value:name pairs in the EditValues property of Columns - this is especially useful for SearchType.DropDown. Here is an example

<trirand:JQGridColumn 
   DataField="CompanyName" 
   Searchable="true" 
   SearchType="DropDown" 
   SearchValues="1:FedEx;2:UPS;3:TNT">

You can also use the SearchControID property of the column to specify from which asp:dropdownlist the grid control should take the values for its search dropdown. Example:

<trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1">
   <Columns>            
      <trirand:JQGridColumn 
         DataField="ShipCity" 
         SearchType="DropDown" 
         SearchToolBarOperation="IsEqualTo" 
         SearchControlID="DropDownList1" />                
   </Columns>
   <ToolBarSettings ShowSearchToolBar="true"/>
</trirand:JQGrid>    

<asp:DropDownList runat="server" ID="DropDownList1" DataSourceID="SqlDataSource2"
   DataTextField="ShipCity" DataValueField="ShipCity">        
</asp:DropDownList>


<asp:SqlDataSource runat="server" ID="SqlDataSource1" 
   ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>"                 
   SelectCommand="SELECT [OrderID], [RequiredDate], [ShipName], [ShipCity], [Freight] FROM [Orders]">
</asp:SqlDataSource>        

<asp:SqlDataSource runat="server" ID="SqlDataSource2" 
   ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>"                 
   SelectCommand="SELECT DISTINCT [ShipCity] FROM [Orders]">
</asp:SqlDataSource>

jqGrid for ASP.NET will by default automatically evaluate filtering against the datasource and filter row data. It will also fire the Searching (before) and Searched (events). They will be fired for each distinct filter (e.g. in the case above, 3 times - one for each filter). The Searching event can be cancelled (set eventArgs.Cancel to true) and you can implement custom filtering expressions per your requirements.