Using AutoComplete as Custom Column Editor

Environment

Product

Grid for Progress® Telerik® UI for UI for ASP.NET Core

Description

How can I use the Telerik UI for ASP.NET Core AutoComplete as a custom column editor for the Grid in Telerik UI for ASP.NET Core?

Solution

1. Create an editor template within the following directory - "~\Views\Shared\EditorTemplates"
2. Pass the newly created view name to the following column configuration :

Razor

columns.Bound(p => p.ProductName).EditorTemplateName("CustomEditorName");

Example

Index.cshtml

@(Html.Kendo().Grid<GridExample.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns => {
        //columns.Bound(p => p.ProductName).EditorTemplateName("AutoCompleteEditor");
        columns.Bound(p => p.ProductName).EditorTemplateName("ComboBoxEditor");
        columns.Command(command => command.Destroy());
    })
    .Pageable()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Scrollable()
    .ToolBar(t => { t.Create(); t.Save(); })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Model(model => model.Id(p => p.ProductID))
        .Create("Create", "Grid")
        .Read(r=>r.Action("Read", "Grid"))
        .Update(u=>u.Action("Update", "Grid"))
        .Destroy("Destroy", "Grid")
    )
)

AutoCompleteEditor.cshtml

@model string

@(Html.Kendo().AutoCompleteFor(m => m)
      .Placeholder("Select name...")
      .BindTo(new List<string>() {
            "My new name 1",
            "My new name 2",
            "My new name 3",
      }))

ComboBoxEditor.cshtml

@model string

@(Html.Kendo().ComboBoxFor(m => m)
      .Placeholder("Select name...")
      .BindTo(new List<string>() {
          "My new name 1",
          "My new name 2",
          "My new name 3"
      })
      .HtmlAttributes(new { style="width:100%;" }))

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base