Searching

17 May 20182 minutes to read

The grid has an option to search its content using the JavaScript method search with search key as parameter. Also, it provides an option to integrate Search text box in the grid toolbar, by adding search toolbar item in the toolbarSetting.toolbarItems property.

The following code example describes the above behavior.

HTML

<div id="Grid"></div>

JAVASCRIPT

$(function () {
	$("#Grid").ejGrid({
		toolbarSettings : { showToolbar : true, toolbarItems : ["search"] },
		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
		dataSource : window.gridData,
		allowPaging : true,
		allowSearching : true,
		columns : ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
	});
});

The following output is displayed as a result of the above code example.

Initial Searching

While initializing the grid, there is an option to display only the searched data in grid. To perform initial searching, define fields ,key, operator and ignoreCase in the searchSettings property.

NOTE

The key value must be passed as string.

The following code example describes the above behavior.

HTML

<div id="Grid"></div>

JAVASCRIPT

$(function () {
	$("#Grid").ejGrid({
		toolbarSettings : { showToolbar : true, toolbarItems : ["search"] },
		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
		dataSource : window.gridData,
		allowPaging : true,
		allowSearching : true,
		searchSettings: { fields: ["CustomerID"], operator: "contains", key: "frank", ignoreCase: false },
		columns : ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
	});
});

The following output is displayed as a result of the above code example.

List of supported operators in searching.

ej.FilterOperators.equal

ej.FilterOperators.notEqual

ej.FilterOperators.startsWith

ej.FilterOperators.endsWith

ej.FilterOperators.contains