Articles in this section
Category / Section

How to bind the autocomplete data to filter menu or excel filter while using URL Adaptor?

1 min read

We need to perform the server operation to return the autocomplete suggestion value in filter menu. When we bind UrlAdaptor/WebMethodAdaptor, we need to return the autocomplete suggestion result differently from the Grid result. For the Grid, return the resultant object as result/count pair whereas the AutoComplete requires result alone i.e. list of objects.

The Request for the Grid and AutoComplete can be differentiated by RequiresCounts parameter of the Grid. The following code example shows, how to return the data to autocomplete.

JS

<div id="Grid"></div>
<script type="text/javascript">
    $(function () {
        var dataManger = ej.DataManager({
            url: "/Home/DataSource",
            adaptor: new ej.UrlAdaptor()
        });
        $("#Grid").ejGrid({
            dataSource: dataManger,
            allowPaging: true,
            allowFiltering: true,
            filterSettings: { filterType: "menu" },
            columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right },
                        { field: "CustomerID", headerText: "Customer ID" },
                        { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right },
                        { field: "Freight", headerText: "Freight" }
            ],
        });
    });
</script>

MVC

[In View]
@(Html.EJ().Grid<object>("Grid")
        .Datasource(ds => ds.URL("/Home/DataSource").Adaptor("UrlAdaptor"))
        .AllowPaging()
        .AllowFiltering()
        .FilterSettings(f => f.FilterType(FilterType.Menu))
        .Columns(col =>
        {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(80).Add();
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Add();
        }))
[Controller]
namespace EJGrid.Controllers
{
        public ActionResult DataSource(DataManager dm)
        {
            IEnumerable Data = OrderRepository.GetAllRecords();
            DataOperations operation = new DataOperations();
            if (dm.Where != null && dm.Where.Count > 0)
            {
                Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator);
                if (!dm.RequiresCounts){//when count doesn't requires, result alone will be returned
                    if (dm.Select != null) Data = operation.PerformSelect(Data, dm.Select);
                    return Json(Data, JsonRequestBehavior.AllowGet);//Return records alone for the autoComplete list
                }
            }
            int count = Data.AsQueryable().Count();
            if (dm.Skip != 0)
                Data = operation.PerformSkip(Data, dm.Skip);
            if (dm.Take != 0)
                Data = operation.PerformTake(Data, dm.Take);
            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet);  
      }
}

ASP.NET

[aspx]
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowFiltering="True" >  
          <DataManager URL="Defalut.aspx/Data" Adaptor="WebMethodAdaptor"  />
          <FilterSettings FilterType="Menu" />
              <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID" />                
                <ej:Column Field="CustomerID" HeaderText="Customer ID" />
                <ej:Column Field="EmployeeID" HeaderText=" Employee ID " />
                <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />    
            </Columns>
</ej:Grid>  
 
[CS]
public partial class _Default : Page
{    
            [WebMethod]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static object Data(DataManager value)
        {
            IEnumerable Data = OrderRepository.GetAllRecords();
            DataOperations operation = new DataOperations();
            if (value.Where != null && value.Where.Count > 0)
            {
                Data = operation.PerformWhereFilter(Data, value.Where, value.Where[0].Operator);
                if (!value.RequiresCounts)
                {//when count doesn't requires, result alone will be returned
                    if (value.Select != null) Data = operation.PerformSelect(Data, value.Select);
                    return Data;//Return records alone for the autoComplete list
                }
            }
            int count = Data.AsQueryable().Count();
            if (value.Skip != 0)
                Data = operation.PerformSkip(Data, value.Skip);
            if (value.Take != 0)
                Data = operation.PerformTake(Data, value.Take);
            return new { result = Data, count = count };
        }
}

Screen shot:

 

Initial Load:

 

AutoComplete search:

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied