How to prevent a filter textbox in Syncfusion ASP.Net Webforms Grid from sending server-side requests?

Question

I am using the latest version of WebForms Grid from Syncfusion in an ASP.Net Webforms 4.0 website. The binding is done using WebMethod i.e. ajax-enabled web service. The markup of this grid is as below.

The problem is when I filter on Product Name column and start to type into the filter box of Product Name, then the grid sends a request to server for matching product names for each character typed. I do not want this so that the user can type into the filter text box without any server-side requests slowing the user's typing.

Question : How can I prevent the filter text box for Product Name from sending a server request as user types into the text box? I tried searching their documentation for some grid property to solve this but could not find any.

Markup of Webforms Grid from Syncfusion

<ej:Grid ID="Grid1" runat="server" AllowFiltering="True" AllowPaging="True" AllowSorting="True" >
    <DataManager Adaptor="WebMethodAdaptor" URL="WebService1.asmx/GetProducts"   />
    <Columns>
        <ej:Column Field="ProductId"  Width="200" HeaderText="Product ID" AllowFiltering="true"></ej:Column>
        <ej:Column Field="ProductName" Width="200" HeaderText="Product Name" AllowFiltering="true"  ></ej:Column>
        <ej:Column Field="UnitPrice" Width="200" HeaderText="Unit Price" Format="{0:c}" AllowFiltering="true"></ej:Column>
        <ej:Column Field="UnitsInStock"  Width="200" HeaderText="Units in Stock" AllowFiltering="true"></ej:Column>
    </Columns>
    <PageSettings Template=""></PageSettings>
    <RowDropSettings DropTargetID="" DropMapper=""></RowDropSettings>
    <ScrollSettings EnableTouchScroll="False"></ScrollSettings>
    <FilterSettings FilterType="Menu" EnableCaseSensitivity="false"></FilterSettings>
</ej:Grid>

Answer 1

We have analyzed your query and we have achieved your requirement by using DataBound event of grid and ejDataManger. Since we have bound the whole data from code behind to the ejDataManager and assigned it to the dataSource property of ejAutocomplete. Now when we focus to the autocomplete we have bound the data to the autocomplete dataSource and if we choose any data it will prevent from POST. Since the whole data has been retrieved as local data.

Please refer the below code example,

[Default.aspx]

  <ej:Grid ID="Grid1" runat="server" AllowFiltering="True"  AllowPaging="True"…

   <ClientSideEvents DataBound="databound"/>

   …

     <script type="text/javascript">
     var b;
    function databound(args) {
         setTimeout(function () {
            var dataManager = ej.DataManager({ url: "WebService1.asmx/HelloWorld", offline: true, adaptor: "UrlAdaptor" });
            var promise = dataManager.executeQuery(new ej.Query());
            promise.done(function (e) {
            var a = 
   $("#MainContent_Grid1_acString").ejAutocomplete("instance");
                b = e.result;

            });
         promise.fail(function (s) {
                  console.log(s)
    })
  $("#MainContent_Grid1_acString").ejAutocomplete({ focusIn: "change" });
        }, 600);
    }
        function change(args) {
            var a =          $("#MainContent_Grid1_acString").ejAutocomplete("instance");
            a.model.dataSource = b;          //Passed the data as local when we focusIn the autocomplete
        }
</script>

[WebService1.asmx.cs]

 [WebMethod]

      public IEnumerable HelloWorld()

    {

        SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ToString());
        …

        IEnumerable order = (from DataRow row in dt.Rows
                             select new Products
                             {
                                 ProductId = Convert.ToInt32(row["ProductId"]),
                                 ProductName = row["ProductName"].ToString(),
                                 UnitPrice = Convert.ToDouble(row["UnitPrice"]),
                                 UnitsInStock = Convert.ToInt32(row["UnitsInStock"])
                             }).ToList();


        return order;
    }

In the above code we have initialized one method in code behind and return the result alone to bind the data to the autocomplete.