External Search in Grid

17 Aug 20171 minute to read

Using search method of grid, you can search the string in grid externally without using in-built toolbar search support. While using search method it is necessary to set AllowSearching property as true. The following code example explains the above behavior.

HTML

<div class="content-container-fluid">
<div class="row">
<div id="Div1">
<div class="prop-grid">
<div class="row">
<div class="col-md-3">
<input type="text" id="inputText" class="e-ejinputtext" />
<ej:Button ID="search" runat="server" ClientSideOnClick="onSearching" Text="Searching"></ej:Button>
</div>
</div>
</div>
</div>    
<div class="cols-sample-area">
<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowSearching="True">
<Columns>
<ej:Column Field="OrderID" />
<ej:Column Field="CustomerID" />
<ej:Column Field="EmployeeID" />
<ej:Column Field="Freight" />
<ej:Column Field="ShipCity" />
<ej:Column Field="ShipCountry" />
</Columns>
</ej:Grid>
</div>

</div>
</div>

JS

function onSearching(args) {
var obj = $("#Grid").ejGrid("instance");
var val = $("#inputText").val();
obj.search(val);
}

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