An example of an autocomplete control.
Allowing additional properties to be a part of an autocomplete list expands the ability to return additional data in the autocomplete data object. In the client template, a Person object is returned and used in the grid column, instead of just the return text value. Code from a Telerik Github project.
columns.Bound(p => p.Person).ClientTemplate("#= data.Person ? Person.Name : '' # ").Title("AUTOCOMPLETE").Width(200);
The Autocomplete Method
Autocomplete column is bound to an EditorTemplate of type AutoComplete and a Model
public JsonResult GetAutocomplete(string text, string methodName) { List<ResultEntry> lookupResults = new List<ResultEntry>();
//just get something back... lookupResults.Add(new ResultEntry("1", "John")); lookupResults.Add(new ResultEntry("2", "Mike")); lookupResults.Add(new ResultEntry("3", "Annette")); lookupResults.Add(new ResultEntry("4", "Lucas")); lookupResults.Add(new ResultEntry("5", "Asdas"));
var newLookupResults = lookupResults.Where(p => p.Name.Contains(text));
return Json(newLookupResults, JsonRequestBehavior.AllowGet); }
Index Page Code
@(Html.Kendo().Grid<SampleApplication.ViewModels.GridViewModel>() .Name("grid") .HtmlAttributes(new { style = "width: 800px; margin: 100px 0 0 200px" }) .Columns(columns => { columns.Bound(p => p.Person).ClientTemplate("#= data.Person ? Person.Name : '' # ").Title("AUTOCOMPLETE").Width(200); columns.Bound(p => p.Text).Width(200).Title("Text"); columns.Command(commands => commands.Destroy()); }) .ToolBar(commands => { commands.Create().Text("New"); commands.Save(); }) .Editable(editing => editing.Mode(GridEditMode.InCell)) .DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(p => p.ID); }) .Update("Update", "Home") .Read("Read", "Home") .Create("Create", "Home") .Destroy("Destroy", "Home") .ServerOperation(false) .Events(e => e.Change("onChange")) ))
<script type="text/javascript"> function onChange(e) { if (e.action == "itemchange") { if (e.field == "Person") { if (typeof (e.items[0].Person) == "string") { e.items[0].set("Person", { ID: "0", Name: e.items[0].Person }); $("#grid").data("kendoGrid").closeCell($("[data-role=autocomplete]").closest("td")); } } } } function onAdditionalData() { return { text: $("#Person").val() }; }</script>
A different type of autocomplete with images.