Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet-core/html-helpers/editors/autocomplete/binding.md

@@ -0,0 +1,56 @@
+---
+title:  Ajax Binding
+page_title: Ajax Binding | Telerik UI AutoComplete HtmlHelper for ASP.NET Core
+description: "Learn how to implement Ajax Binding with Telerik UI AutoComplete HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
+slug: htmlhelpers_autocomplete_ajaxbinding_aspnetcore
+position: 2
+---
+
+# Ajax Binding
+
+The AutoComplete provides support for remote data binding by using a `DataSource` configuration object. You can configure the AutoComplete to get its data from a remote source by making an AJAX request.
+
+1. Create an action that returns the data as a JSON result.
+
+            public IActionResult Index()
+            {
+                return View(new ProductViewModel
+                {
+                    ProductID = 4,
+                    ProductName = "ProductName4"
+                });
+            }
+
+            public JsonResult GetProductsAjax()
+            {
+                var products = Enumerable.Range(0, 500).Select(i => new ProductViewModel
+                {
+                    ProductID = i,
+                    ProductName = "ProductName" + i
+                });
+
+                return Json(products);
+            }
+
+1. Add the AutoComplete to the view and configure its DataSource to use remote data.
+
+            @model MvcApplication1.Models.ProductViewModel
+
+            @(Html.Kendo().AutoCompleteFor(m => m.ProductName)
+                .Filter("contains")
+                .DataTextField("ProductName")
+                .Placeholder("Select product...")
+                .DataSource(source =>
+                {
+                    source.Read(read =>
+                    {
+                        read.Action("GetProductsAjax", "Home");
+                    })
+                    .ServerFiltering(false);
+                })
+            )
+
+## See Also
+
+* [Local Data Binding]({% slug htmlhelpers_autocomplete_serverbinding_aspnetcore %})
+* [Server-Side API](/api/dropdownlist)

docs-aspnet-core/html-helpers/editors/autocomplete/binding/ajax-binding.md

@@ -0,0 +1,20 @@
+---
+title:  Overview
+page_title: Data Binding | Telerik UI AutoComplete HtmlHelper for ASP.NET Core
+description: "Learn the basics approaches for binding the Telerik UI AutoComplete HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
+slug: htmlhelpers_autocomplete_databinding_aspnetcore
+position: 1
+---
+
+# Data Binding
+
+The AutoComplete provides a set of options for binding it to data.
+
+The supported data-binding approaches are:
+
+* [Ajax binding]({% slug htmlhelpers_autocomplete_ajaxbinding_aspnetcore %})
+* [Server binding]({% slug htmlhelpers_autocomplete_serverbinding_aspnetcore %})
+
+## See Also
+
+* [Server-Side API](/api/autocomplete)

docs-aspnet-core/html-helpers/editors/autocomplete/binding/binding-overview.md

@@ -0,0 +1,52 @@
+---
+title:  Server Binding
+page_title: Server Binding | Telerik UI AutoComplete HtmlHelper for ASP.NET Core
+description: "Learn how to implement server binding in the Telerik UI AutoComplete HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
+slug: htmlhelpers_autocomplete_serverbinding_aspnetcore
+position: 3
+---
+
+# Server Binding
+
+Local data is the data that is available on the client when the AutoComplete is initialized.
+
+You can bind the AutoComplete locally on the server by passing the appropriate collection to the HTML helper `BindTo()` method.
+
+1. Pass the data to the view through `ViewData`.
+
+            public IActionResult Index()
+            {
+                ViewData["products"] = GetProducts();
+
+                return View(new ProductViewModel
+                {
+                    ProductID = 4,
+                    ProductName = "ProductName4"
+                });
+            }
+
+            private static IEnumerable<ProductViewModel> GetProducts()
+            {
+                var products = Enumerable.Range(0, 2000).Select(i => new ProductViewModel
+                {
+                    ProductID = i,
+                    ProductName = "ProductName" + i
+                });
+
+                return products;
+            }
+
+1. Add the AutoComplete to the view and bind it to the data that is saved in `ViewData`.
+
+            @model MvcApplication1.Models.ProductViewModel
+
+            @(Html.Kendo().AutoCompleteFor(m => m.ProductName)
+                .DataTextField("ProductName")
+                .BindTo((System.Collections.IEnumerable)ViewData["products"])
+            )
+
+## See Also
+
+* [Ajax Data Binding]({% slug htmlhelpers_autocomplete_ajaxbinding_aspnetcore %})
+* [Ajax Data Binding by the AutoComplete HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/autocomplete/serverfiltering)
+* [Server-Side API](/api/dropdownlist)

docs-aspnet-core/html-helpers/editors/autocomplete/binding/server-binding.md

@@ -0,0 +1,38 @@
+---
+title: Grouping
+page_title: Grouping | Telerik UI AutoComplete HtmlHelper for ASP.NET Core
+description: "Learn how to group data in the Telerik UI AutoComplete HtmlHelper for ASP.NET Core works."
+slug: htmlhelpers_autocomplete_grouping_aspnetcore
+position: 2
+---
+
+# Grouping Overview
+
+The AutoComplete enables you to bind it to a grouped data source.
+
+To group the data, define a group `datasource` expression which uses a custom DataSource configuration, and specify the field by which the AutoComplete will be grouped. For a runnable example, refer to the [demo on grouping in the AutoComplete](https://demos.telerik.com/aspnet-core/autocomplete/grouping).
+
+> The data source sorts the grouped data either in ascending or descending order. To persist a specific group order, use the [server grouping feature](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverGrouping). To define the `serverGrouping` option, use the `ServerGrouping` method of the DataSource.
+
+The following example demonstrates how to group the data in the AutoComplete by country.
+
+    ```
+    @(Html.Kendo().AutoComplete()
+        .Name("customers")
+        .DataSource(source =>  source
+            .Custom()
+            .Group(g => g.Add("Country", typeof(string)))
+            .Transport(transport => transport
+                .Read(read =>
+                {
+                    read.Action("Grouping_GetCustomers", "Home");
+                }))
+            )
+        .DataTextField("ContactName")
+    )
+    ```
+
+## See Also
+
+* [Grouping by the AutoComplete HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/autocomplete/grouping)
+* [Server-Side API](/api/autocomplete)

docs-aspnet-core/html-helpers/editors/autocomplete/grouping.md

@@ -80,7 +80,7 @@ The following example demonstrates how to define the AutoComplete by using the A
 
 ## Basic Configuration
 
-The following example demonstrates the basic configuration of the AutoComplete HtmlHelper and how to get the AutoComplete instance.
+The following example demonstrates the basic configuration of the AutoComplete HtmlHelper.
 
 ```
     @(Html.Kendo().AutoComplete()
@@ -96,7 +96,6 @@ The following example demonstrates the basic configuration of the AutoComplete H
         .MinLength(3)
         .HtmlAttributes(new { style = "width:100%" })
         .Height(520)
-
         .DataSource(source =>
         {
             source.Read(read =>
@@ -106,14 +105,6 @@ The following example demonstrates the basic configuration of the AutoComplete H
             })
             .ServerFiltering(true);
         })
-        .Events(e => e
-        .Change("onChange")
-        .Select("onSelect")
-        .Open("onOpen")
-        .Close("onClose")
-        .DataBound("onDataBound")
-        .Filtering("onFiltering")
-        )
     )
 
     <script type="text/javascript">
@@ -122,25 +113,35 @@ The following example demonstrates the basic configuration of the AutoComplete H
                 text: $("#autocomplete").val()
             };
         }
-
-        $(function () {
-            // The Name() of the AutoComplete is used to get its client-side instance.
-            var autocomplete = $("#autocomplete").data("kendoAutoComplete");
-            console.log(autocomplete);
-        });
     </script>
 ```
 
 ## Functionality and Features
 
-* [Model binding]({% slug modelbinding_autocomplete_aspnetcore %})
+* [Data binding]({% slug htmlhelpers_autocomplete_databinding_aspnetcore %})
+* [Grouping]({% slug htmlhelpers_autocomplete_grouping_aspnetcore %})
+* [Templates]({% slug htmlhelpers_autocomplete_templates_aspnetcore %})
 * [Virtualization]({% slug virtualization_autocomplete_aspnetcore %})
 * [Accessibility]({% slug accessibility_aspnetcore_autocomplete %})
 
 ## Events
 
 For a complete example on basic AutoComplete events, refer to the [demo on using the events of the AutoComplete](https://demos.telerik.com/aspnet-core/autocomplete/events).
 
+## Referencing Existing Instances
+
+To reference an existing AutoComplete instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) configuration option. Once a reference is established, use the [AutoComplete API](https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete) to control its behavior.
+
+```
+    // Place the following after your Telerik UI AutoComplete for ASP.NET Core declaration.
+    <script>
+        $(document).ready(function() {
+            // The Name() of the AutoComplete is used to get its client-side instance.
+            var autocomplete = $("#autocomplete").data("kendoAutoComplete");
+        });
+    </script>
+```
+
 ## See Also
 
 * [Basic Usage of the AutoComplete HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/autocomplete/index)