Category / Section
How to avoid hidden column in search results?
1 min read
How to avoid hidden column in search results?
Description:
In the search results, by default the hidden columns will be included after searching in Grid. We can able to prevent this default behavior by following solution.
Solution:
To search the Grid over visible columns alone, mention the visible column’s field names in the fields property of Grid searchSettings. Refer to the following code examples.
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
//Visible column's field
searchSettings: { fields: ["OrderID","ShipCity","Verified"] },
toolbarSettings: {
showToolbar: true,
toolbarItems: [ej.Grid.ToolBarItems.Search]
},
columns: [
{ field: "OrderID" },
{ field: "CustomerID", visible: false },
{ field: "EmployeeID", visible: false },
{ field: "Freight", format: "{0:C2}", visible: false },
{ field: "ShipCity" },
{ field: "Verified" }
]
});
});
</script>
MVC
@(Html.EJ().Grid<object>("Editing")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.ToolbarSettings(tools => {
tools.ShowToolbar()
.ToolbarItems(items => {
items.AddTool(ToolBarItems.Search);
});
})
.SearchSettings(search => {
search.Fields(field => {
field.Add("OrderID");
field.Add("ShipCity");
field.Add("Verified");
});
})
.Columns(col =>
{
col.Field("OrderID").Add();
col.Field("CustomerID").Visible(false).Add();
col.Field("EmployeeID").Visible(false).Add();
col.Field("Freight").Format("{0:C2}").Visible(false).Add();
col.Field("ShipCity").Add();
col.Field("Verified").Add();
})
)
Controller
public class HomeController : Controller
{
public ActionResult Index() {
ViewBag.datasource = new NorthwindDataContext().OrdersViews.ToList(); ;
return View();
}
}
ASP
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<SearchSettings Fields="OrderID,ShipCity,Verified" />
<ToolbarSettings ShowToolbar="True" ToolbarItems="search"/>
<Columns>
<ej:Column Field="OrderID" />
<ej:Column Field="CustomerID" Visible="false"/>
<ej:Column Field="EmployeeID" Visible="false"/>
<ej:Column Field="Freight" Format="{0:C2}" Visible="false"/>
<ej:Column Field="ShipCity" />
<ej:Column Field="Verified" />
</Columns>
</ej:Grid>
CodeBehind
public partial class GridFeatures : System.Web.UI.Page
{
List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
int orderId = 10643;
int empId = 0;
for (int i = 1; i < 9; i++)
{
order.Add(new Orders(orderId + 1, "ALFKI", empId + 1, 32.38, "Alfreds Futterkiste ", "Germany"));
order.Add(new Orders(orderId + 2, "ANATR", empId + 2, 11.61, "Ana Trujillo Emparedados y helados", "Mexico"));
order.Add(new Orders(orderId + 3, "ANTON", empId + 3, 45.34, "Antonio Moreno Taquería", "Mexico"));
order.Add(new Orders(orderId + 4, "AROUT", empId + 4, 37.28, "Around the Horn", "UK"));
order.Add(new Orders(orderId + 5, "BERGS", empId + 5, 67.00, "Berglunds snabbköp", "Sweden"));
order.Add(new Orders(orderId + 6, "BLONP", empId + 6, 23.32, "Blondel père et fils", "France"));
orderId += 6;
empId += 6;
}
this.OrdersGrid.DataSource = order;
this.OrdersGrid.DataBind();
}
Figure: Search results of visible columns