Custom Binding
You can use a custom DataSource and bind the AutoComplete to a ToDataSourceResult instance.
Setting Up the Project
- Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET Core.
-
Create an action method which renders the view.
public ActionResult Index() { return View(); } -
Create a new action method and pass the Products table as JSON result.
public JsonResult GetProducts([DataSourceRequest] DataSourceRequest request) { NorthwindDataContext northwind = new NorthwindDataContext(); return Json(northwind.Products.ToDataSourceResult(request)); } Add an Ajax-bound AutoComplete.
@(Html.Kendo().AutoComplete()
.Name("productAutoComplete")
.DataTextField("ProductName") // Specify which property of the Product to be used by the autocomplete as a text.
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax") // Set this type if you want to use DataSourceRequest and ToDataSourceResult instances.
.Transport(transport =>
{
transport.Read("GetProducts", "Home");
})
.Schema(schema =>
{
schema.Data("Data") // Define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option.
.Total("Total"); // Define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option.
});
})
)
<kendo-autocomplete name="productAutoComplete"
datatextfield="ProductName">
<datasource type="DataSourceTagHelperType.Custom"
server-filtering="true"
custom-type="aspnetmvc-ajax">
<transport>
<read url="@Url.Action("GetProducts", "Home")"/>
</transport>
<schema data="Data" total="Total">
</schema>
</datasource>
</kendo-autocomplete>
Sending Parameters to the Server
The following example demonstrates how to configure the AutoComplete to send parameters to the server.
@(Html.Kendo().AutoComplete()
.Name("productAutoComplete")
.DataTextField("ProductName") // Specify which property of the Product will be used by the AutoComplete.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home")
.Data("onAdditionalData");
});
})
)
<kendo-autocomplete name="productAutoComplete"
datatextfield="ProductName">
<datasource>
<transport>
<read url=@Url.Action("GetProducts", "Home") data="onAdditionalData" />
</transport>
</datasource>
</kendo-autocomplete>
<script>
function onAdditionalData() {
return {
text: $("#productAutoComplete").val()
};
}
</script>
The following example demonstrates how the GetProducts method is used.
public JsonResult GetProducts(string text)
{
var northwind = new SampleEntities();
var products = northwind.Products.Select(product => new ProductViewModel
{
ProductID = product.ProductID,
ProductName = product.ProductName,
UnitPrice = product.UnitPrice ?? 0,
UnitsInStock = product.UnitsInStock ?? 0,
UnitsOnOrder = product.UnitsOnOrder ?? 0,
Discontinued = product.Discontinued
});
if (!string.IsNullOrEmpty(text))
{
products = products.Where(p => p.ProductName.Contains(text));
}
return Json(products);
}