New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Add New Values to Grid Records with AutoComplete as Editor

Environment

Product	Telerik UI for ASP.NET Core
Product Version	Created with version 2024.4.1112

Description

How can I use the ASP.NET Core 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:

Define an InCell editable Grid and bind its column to the complex Model property Person.

Razor
@(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"))
    )
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-grid name="grid" height="430">
    <columns>
        <column field="Person" template="#= data.Person ? Person.Name : '' #" title="AUTOCOMPLETE"></column>
        <column field="Text" title="Text"></column>
    </columns>
    <toolbar>
        <toolbar-button name="create" text="New"></toolbar-button>
        <toolbar-button name="save"></toolbar-button>
    </toolbar>
    <editable mode="incell"/>
    <scrollable enabled="true"/>
    <datasource type="DataSourceTagHelperType.Ajax" server-operation="false" on-change="onChange">
        <schema>
            <model id="ID"></model>
        </schema>
        <transport>
            <read url="@Url.Action("Read", "Home")" />
            <update url="@Url.Action("Update", "Home")" />
        </transport>
    </datasource>
</kendo-grid>

Create a custom editor template for the column that contains an AutoComplete editor, which binds to remote data.

Configure the AutoComplete for server-side filtering.

Razor
@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)
)
Razor
@addTagHelper *, Kendo.Mvc
@model ResultEntryViewModel

<kendo-autocomplete for="ID" highlight-first="true" delay="500"
    dataTextField="Name">
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="@Url.Action("GetAutocomplete", "Home")" data="onAdditionalData" />
        </transport>
    </datasource>
</kendo-autocomplete>

Handle the Change 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() method of the Grid to exit edit mode.

<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 when the Grid uses the Telerik UI AutoComplete as an editor. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.

Add New Values to Grid Records with AutoComplete as Editor

Environment

Description

Solution

More ASP.NET Core AutoComplete Resources

See Also