Using an Autocomplete control inside a custom popup editor for a Grid

Question

I'm using a custom template for my grid's popup editor, so I can only display the fields that may be edited. In this template, I'd like to use an an auto complete input. I've got it 'working': the control is in the editor template and does what an auto complete should do.

However, the box won't save when I save the changes. How can I make sure Kendo still uses it as a field for my model, but also as an auto complete control?

The grid:

@(Html.Kendo().Grid<Receipt>()
    .Name("GridReceipts")
    .Columns(columns => {
        columns.Bound(o => o.Id);
        columns.Bound(o => o.Supplier);
        columns.Bound(o => o.Status);
        columns.Command(c => {
            c.Edit().Text(" ");
            c.Destroy().Text(" ");
        });
    })
    .DataSource(d => d
        .WebApi()
        .Model(m => m.Id(o => o.Id))
        .Create(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts" })))
        .Read(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts" })))
        .Update(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts", id = "{0}" })))
        .Destroy(c => c.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Receipts", id = "{0}" })))
    )
    .ToolBar(toolbar => toolbar.Create())
    .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("Receipt"))
    .Deferred()
)

The auto complete (in the editor template):

@model Receipt

<div class="k-edit-label">@Html.LabelFor(m => m.Supplier)</div>
<div class="k-edit-field">
    @(Html.Kendo().AutoCompleteFor(m => m.Supplier)
        .Name("Supplier")
        .DataSource(s => {
            s.Read("Autocomplete", "Suppliers");
        })
        .DataTextField("Name")
        .MinLength(2)
    )
</div>

Answer 1

Try this:

@(Html.Kendo().AutoComplete()
    .Name("Supplier")
    .DataSource(s => {
        s.Read("Autocomplete", "Suppliers");
    })
    .MinLength(2)
)

Change AutoCompleteFor to AutoComplete. I'm using autocomplete in some of my custom pop ups and everything is working fine. The model should bind to the .Name("Supplier") which should be the same as object property. You don't have to specify the anonymous types.

As for the Datasource Read I return List of strings

Here is example of my working code.

Custom pop up :

@model Charts.Models.Machine

        @(Html.Kendo().AutoComplete()
    .Name("Grupa")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetGroups", "Helper");
        })
        .ServerFiltering(true);
    })
        )

Model:

public class Machine
    {
        public virtual int ID { get; set; }
        [Required(ErrorMessage = "Pole Grupa nie może być puste.")]
        public virtual string Grupa { get; set; }

    }

Datasource Read:

public ActionResult GetGroups()
{
    IEnumerable<string> list = new GroupsRepository().Select().Select(x => x.Nazwa).Distinct();

    return Json(list, JsonRequestBehavior.AllowGet);
}