kendo-ui mvc autocomplete does not display results - kendo-ui

Question

I was able to get a working version using the js version dojo autocomplate but I need it to work using the MVC version. I added DataSourceRequest in the controller as suggested below and changed a couple more items that got rid of the js error I was getting:
//Fixed, added the schema definition
Uncaught TypeError: e.slice is not a function
It appears to work as I trace it through the controller, which returns the expected json (below) but it doesn't finish wiring up as the spinner hangs and the results aren't displayed.
{
"Data": [{
"EmployeeId": 2147483649,
"EmployeeName": "Emily F Johnston",
"Rating": 75.0,
"LastAudited": null
}, {
"EmployeeId": 2147483687,
"EmployeeName": "Joshua Smith",
"Rating": 80.2,
"LastAudited": null
}, {
"EmployeeId": 2147483656,
"EmployeeName": "Thomas F Dunn",
"Rating": 45.0,
"LastAudited": "\/Date(1463893200000)\/"
}, {
"EmployeeId": 2147483660,
"EmployeeName": "Marjon Christine Marik",
"Rating": 88.0,
"LastAudited": null
}],
"Total": 4,
"AggregateResults": null,
"Errors": null
}
The controller:
[HttpPost]
public ActionResult EmployeeLookup(string text, [DataSourceRequest] DataSourceRequest request)
{
var filter = request?.Filters.FirstOrDefault() as FilterDescriptor;
var search = string.Empty;
if (filter != null)
{
search = filter.Value?.ToString() ?? string.Empty;
}
var employees = new List<EmployeeLookupResultEntryViewModel>();
var results = _employeeService.EmployeeLookup(search);
if (results == null)
return Json(employees.ToDataSourceResult(request));
return Json(results.ToDataSourceResult(request));
}
The autocomplete definition:
Also, I found this doco from Telerik that looks very similar to my use case Telerik Custom Template but it lacks showing the controller methods so I can't verify how they wired it up.
#(Html.Kendo().AutoComplete()
.Name("Employees")
.DataTextField("EmployeeName")
.Placeholder("Search Employee")
.Filter("contains")
.IgnoreCase(true)
.MinLength(3)
.Delay(300)
.HighlightFirst(true)
.HtmlAttributes(new { style = "width:100%" })
.NoDataTemplate("Employee Not Found")
.DataSource(dataSource =>
{
dataSource.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("EmployeeLookup", "Employee", new {area = "Client"});
})
.Schema(schema => {schema.Data("Data");});
})
.HeaderTemplate("<div style=\"width: 400px;\" class=\"dropdown-header k-widget k-header\">" +
"<span>Id</span>" +
"<span>Name</span>" +
"<span>Pwc Rating" +
"<span>Last Audited</span>" +
"</div>")
.Template("<span style=\"width: 50px;\">#: data.EmployeeId #</span><span class=\"cell\">#: data.EmployeeName #</span><span class=\"cell\">#: data.PwcRating #</span><span class=\"cell\">#: data.LastAudited #</span>")
)
I seem to be missing some config setting in the html because the json/datasouce is being returned, similarly to what the documentation states...yet the widget can't wire it up.

Answer 1

You have enabled server filtering, which is significantly more complex than you've implemented
If you intended to enable this feature there are three things you need to do
Add Kendo ASP.NET MVC libraries to your project
Change your datasource type to be aspnetmvc-ajax:
Rework your action to use DataSourceRequest in your controller per this example. The DataSourceRequest attribute is NOT optional
public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(productService.Read().ToDataSourceResult(request));
}