Out-of-the-box MVC ModelBinder for KendoUI AutoComplete

asp.net-mvc, autocomplete, kendo-ui

Solution

@David Perlman, I am completely editing this answer since I now understand your question better. In the `Kendo` example on `Server Filtering` they are using OData which has out of the box server filtering, something I was not aware of myself. If you use an MVC Controller like I do, you will have to modify the example and use a parameterMap like I will use in my new code example. In my example I have a simple table of "Sites" I use `Entity Framework` and I have a view wired directly to the Sites table. I have a class called Lookups.cs and I return a dynamic model GetSitesStartsWith(string startsWith) Like so:

  public dynamic GetSitesStartsWith(string startsWith)
    {
        return _context.vAaiomsSites
            .Select(s => new
            {
                ID = s.ID,
                SiteName = s.SiteName
            }).OrderBy(s => s.SiteName).Where(s => s.SiteName.StartsWith(startsWith));
    }

So in my Requisitions controller I create a JsonResult like so:

  public JsonResult GetSitesStartsWith(string startsWith)
    {

        var lookups = new Lookups();
        var data = lookups.GetSitesStartsWith(startsWith);
        return Json(data, JsonRequestBehavior.AllowGet);
    }

Last thing to do is add the AutoComplete code to the View that is wired to this JsonResult rather than to OData like so:

<div id="example" class="k-content">
        <div class="demo-section">
            <h2>Sites</h2>
            <input id="sites" style="width: 250px" />
        </div>
        <script>
            $(document).ready(function() {
                $("#sites").kendoAutoComplete({
                    placeholder: "Enter site ...",
                    dataTextField: "SiteName",
                    filter: "startswith",
                    minLength: 3,
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 20,
                        transport: {
                            read:
                                {
                                    url: "Requisitions/GetSitesStartsWith"
                                }, //read
                            parameterMap: function() {// send value of autocomplete as the "startsWith" parameter
                                        return { 
                                               startsWith:$("#sites").data("kendoAutoComplete").value()
                                        };
                            }
                        } //transport
                    } //datasource
                }); //kendoAutoComplete
            }); //DocumentReady
        </script>
</div> 

I have this example working and it does the filtering on the server, verified with developer tools. Let me know if you need any more help.

Problem

Original source