How to avoid hidden column in search results?

1 min read

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();
    }