New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Using AutoComplete as Custom Column Editor

Environment

Product Grid for Progress® Telerik® UI for UI for ASP.NET MVC

Description

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

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 :
columns.Bound(p => p.ProductName).EditorTemplateName("CustomEditorName");

Example


@(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")
    )
)

@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",
      }))

@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 MVC Grid Resources

See Also

In this article