Global Search

You can use the AdditionalQueryOptions to pass additional options from client to server side. In this example, we use this to create a "global search". When you click the search button below, it will call the javascript method MVCGrid.setAdditionalQueryOptions with the value of the text box. This will be sent to the server-side with the ajax call and can be accessed in the RetrieveDataMethod. In this example, the database will concat first and last name and query that for the entered text. Note, when using the AdditionalQueryOptions, you must specify the names you are going to use in the grid config. See the code sample below.

Or use client-side bindings, as is done below:

 

 
Id First Name Last Name
370PatrickAdams
493KarenAdams
570NancyAdams
599EricAdams
635ChristineAdams
663BonnieAdams
778RonaldAdams
820SeanAdams
897JudithAdams
857MichaelAlexander
Showing 1 to 10 of 1000 entries

Code

View (Uses client-side bindings)
<div class="panel panel-default">
    <div class="panel-body">
        @Html.Partial("_MVCGridToolbar", new MVCGridToolbarModel()
        {
            MVCGridName = "GlobalSearchGrid",
            PageSize = true,
            ColumnVisibility = false,
            Export = false,
            GlobalSearch = true
        })
        @Html.MVCGrid("GlobalSearchGrid")
    </div>
</div>
        
Inside MVCGridConfig.cs
MVCGridDefinitionTable.Add("GlobalSearchGrid", new MVCGridBuilder<Person>(colDefauls)
    .WithAuthorizationType(AuthorizationType.AllowAnonymous)
    .AddColumns(cols =>
    {
        cols.Add("Id").WithSorting(false)
            .WithValueExpression(p => p.Id.ToString());
        cols.Add("FirstName").WithHeaderText("First Name")
            .WithValueExpression(p => p.FirstName);
        cols.Add("LastName").WithHeaderText("Last Name")
            .WithValueExpression(p => p.LastName);
    })
    .WithAdditionalQueryOptionNames("Search")
    .WithAdditionalSetting("RenderLoadingDiv", false)
    .WithSorting(true, "LastName")
    .WithPaging(true, 10, true, 100)
    .WithRetrieveDataMethod((context) =>
    {
        var options = context.QueryOptions;
        int totalRecords;
        var repo = DependencyResolver.Current.GetService<IPersonRepository>();
        string globalSearch = options.GetAdditionalQueryOptionString("Search");
        var items = repo.GetData(out totalRecords, globalSearch, options.GetLimitOffset(), options.GetLimitRowcount(),
            options.SortColumnName, options.SortDirection == SortDirection.Dsc);
        return new QueryResult<Person>()
        {
            Items = items,
            TotalRecords = totalRecords
        };
    })
);