SearchGrid

Make your grid searchable

Enable search icon in your navigator

<sjg:grid
	id="mygrid"
	caption="My searchable Grid"
	href="%{remoteurl}"
	pager="true"
	navigator="true"
	navigatorSearch="true"
	...
>

Search Options for grid column

With the attributes search and searchoptions in the sjg:gridColumn tag you can specify search options for every column.

A grid column only with equals ant not equals search

<sjg:gridColumn
	...
	search="true"
	searchoptions="{sopt:['eq','ne']}"
/>

A grid column with datepicker in the search dialog

first create a javascript function

datePick = function(elem) {
	$(elem).datepicker();
	$('#ui-datepicker-div').css("z-index", 2000);
}

now you can use this function in your search options.

<sjg:gridColumn
	...
	formatter="date"
	formatoptions="{newformat : 'd.m.Y H:i', srcformat : 'Y-m-d H:i:s'}"
	width="90"
	search="true"
	searchoptions="{sopt:['eq','ne','lt','gt'], dataInit:datePick, attr:{title:'Your Search Date'}}"
/>

A grid column with select box in the search dialog

Create an action that returns a select box with searchable values.

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<s:select list="mySearchValuesList" theme="simple" emptyOption="true"/>

Create a URL to your select box action and use it in your search options.

<s:url var="selecturl" action="select" />
<sjg:gridColumn
	...
	search="true"
	searchtype="select"
	searchoptions="{sopt:['eq','ne'], dataUrl : '%{selecturl}'}"
	...
/>

Search properties in your action

You should add three properties in your Struts2 grid action.

	// Search Field
	private String searchField;

	// The Search String
	private String searchString;

	// he Search Operation
	private String searchOper;
.
.
.
	public void setSearchField(String searchField) {
		this.searchField = searchField;
	}

	public void setSearchString(String searchString) {
		this.searchString = searchString;
	}

	public void setSearchOper(String searchOper) {
		this.searchOper = searchOper;
	}

With this properties you are able to build hibernate criterias or build a custom SQL string. Take a look at the Class GridDataProvider in the Grid Showcase to see how you can build a hibernate criteria.

Use filterGrid for searching in the Grid

First add an empty div above the grid tag.

<div id="mygridfilter"></div>

Now add following script code after your grid tags.

$(document).ready(function () {
	$("#mygridfilter").jqGrid('filterGrid','#mygridid',{
		autosearch : false,
		gridNames : true,
		formtype : 'vertical',
		autosearch : false,
		enableSearch : true,
		enableClear : true,
		gridModel : true,
		buttonclass : 'ui-state-default ui-corner-all'
	});
});

See jqGrid wiki for more informations. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_searching

Enable multi search for your grid

You can enable the multi search in your navigatorSearchOptions attribute.

<sjg:grid
	id="mygrid"
	caption="My searchable Grid"
	href="%{remoteurl}"
	pager="true"
	navigator="true"
	navigatorSearch="true"
	navigatorSearchOptions="{multipleSearch:true}"
	...
>

After submit the search you receive a JSON object in your action. How to handle this can you read in this short tutorial.