How to perform searching in whole datasource of the JavaScript Grid?
By default, the grid searches for the key value only in the columns defined in theipt JavaScript Grid column definition. In some cases, we may like to search whole dataSource for the search Key.
Solution:
We can achieve the above requirement by adding all the field names to the searchSettings.fields property of the Grid.
Example:
In the following example, we have rendered a grid with searching enabled.
- Render the grid
JS:
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
allowSearching: true,
toolbarSettings: {showToolbar: true, toolbarItems: ["search"]},
columns: [
{ field: "OrderID" },
{ field: "CustomerID" },
{ field: "Freight" },
{ field: "ShipCountry" },
],
dataBound: "onDataBound",
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data)
.AllowPaging()
.AllowSearching()
.ToolbarSettings(tool =>
{
tool.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Search);
});
})
.Columns(col =>
{
col.Field("OrderID").Add();
col.Field("CustomerID").Add();
col.Field("Freight").Add();
col.Field("ShipCountry").Add();
})
.ClientSideEvents(eve=>eve.DataBound("onDataBound"))
)
[In controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP
[aspx]
<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowSearching="True">
<ToolbarSettings ShowToolbar="True" ToolbarItems="search"></ToolbarSettings>
<ClientSideEvents DataBound="onDataBound" />
<Columns>
<ej:Column Field="OrderID" />
<ej:Column Field="CustomerID" />
<ej:Column Field="Freight" />
<ej:Column Field="ShipCountry" />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = new NorthwindDataContext().Orders.ToList();
this.Grid.DataBind();
}
}
- In the DataBound event of the Grid, we can get the first JSON array of the dataSource. By traversing through this, we can get all the field names in the dataSource which we add to the serachSettings.fields property of the Grid
<script type="text/javascript">
//dataBound event of the Grid
function onDataBound(args) {
for (var key in this.model.currentViewData[0])//traverse through the first JSON array of the dataSource
this.model.searchSettings.fields.push(key);//push the field names to the searchSettings.fields array
}
</script>
JS Playground link: https://jsplayground.syncfusion.com/amdr43qc
Result:
Fig 1: Initial Rendering
Fig 2: On Searching operation
Conclusion
I hope you enjoyed learning about how to perform searching in whole datasource of the Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
