# Add New Values to Grid Records with AutoComplete as Editor

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Telerik UI for ASP.NET MVC</td>
 </tr>
 <tr>
  <td>Product Version</td>
  <td>Created with version 2024.4.1112</td>
 </tr>
</table>

## Description

How can I use the ASP.NET MVC AutoComplete component as an editor in an InCell editable Grid to add new values to the Grid records?

## Solution

The AutoComplete editor will provide a convenient list of options to hint the user of the available options. You can achieve this implementation through the following key steps:

1. [Define an InCell editable Grid](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/batch) and bind its column to the complex Model property **Person**.

   ```Razor HtmlHelper
   @(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditingAutoCompleteNewItem.Models.GridViewModel>()
       .Name("grid")
       .Columns(columns =>
       {
           columns.Bound(p => p.Person).ClientTemplate("#= data.Person ? Person.Name : '' # ").Title("AUTOCOMPLETE");
           columns.Bound(p => p.Text).Title("Text");
       })
       .ToolBar(commands =>
       {
           commands.Create().Text("New");
           commands.Save();
       })
       .Scrollable()
       .HtmlAttributes(new { style = "height: 430px;" })
       .Editable(editing => editing.Mode(GridEditMode.InCell))
       .DataSource(dataSource => dataSource
           .Ajax()
           .ServerOperation(false)
           .Model(model =>
           {
               model.Id(p => p.ID);
           })
           .Update("Update", "Home")
           .Read("Read", "Home")
           .Events(e => e.Change("onChange"))
       )
   )
   ```

2. Create a [custom editor template for the column](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/batch#editors) that contains an AutoComplete editor, which binds to remote data.

3. Configure the AutoComplete for [server-side filtering](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/autocomplete/filtering).

   ```Razor HtmlHelper
   @model ResultEntryViewModel

   @(Html.Kendo().AutoCompleteFor(m => m.ID)
       .DataTextField("Name")
       .DataSource(dataSource => 
           dataSource.Read(read => read.Action("GetAutocomplete", "Home").Data("onAdditionalData"))
           .ServerFiltering(true))
       .Delay(500)
       .HighlightFirst(true)
   )
   ```

4. Handle the [`Change`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/datasourceeventbuilder#changesystemstring) event of the Grid's DataSource and update the **Person** field of the respective record when its current value is changed through the AutoComplete editor. Then, trigger the [`closeCell()`](https://docs.telerik.com/kendo-ui/api/ui/grid/methods/closecell) method of the Grid to exit edit mode.

   ```JS
   <script type="text/javascript">
       // Handle the Grid's DataSource Change event.
       function onChange(e) {
           // The Change event provides the action argument for the type of the operation.
           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>
   ```

To see the complete example, refer to the  ASP.NET MVC project on how to [add a new value to the Grid records](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridEditingAutoCompleteNewItem) when the Grid uses the Telerik UI AutoComplete as an editor.

## More ASP.NET MVC AutoComplete Resources

* [ASP.NET MVC AutoComplete Documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/autocomplete/overview)

* [ASP.NET MVC AutoComplete Demos](https://demos.telerik.com/aspnet-mvc/autocomplete/index)

* [ASP.NET MVC AutoComplete Product Page](https://www.telerik.com/aspnet-mvc/autocomplete)

* [Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-mvc/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET MVC Forums](https://www.telerik.com/forums/aspnet-mvc)

## See Also

* [Server-Side API Reference of the AutoComplete for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/api/autocomplete)

* [Server-Side API Reference of the Grid for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/api/grid)