Articles in this section
Category / Section

How to bind the autocomplete data in JavaScript Grid?

5 mins read

We need to perform the server operation to return the autocomplete suggestion value in filter menu. in JavaScript Grid 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:

Screenshot in JavaScript Grid

 

Initial Load:

Initial Load

 

AutoComplete search:

 

AutoComplete search.

Conclusion

I hope you enjoyed learning about how to bind the autocomplete data to filter menu or excel filter while using URL Adaptor in JavaScript Grid.

You can refer to our JavaScript Grid page to know about its other groundbreaking feature representations and documentation, 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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