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
- Create an editor template within the following directory - "~\Views\Shared\EditorTemplates\"
- 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%;" }))