在Grid的自定义弹出编辑器中使用自动完成控件

时间:2014-10-17 06:52:56

标签: asp.net-mvc kendo-grid kendo-asp.net-mvc kendo-autocomplete

我在网格弹出编辑器中使用自定义模板,因此我只能显示可以编辑的字段。在此模板中,我想使用自动完成输入。我已经让它“正常工作”:控件位于编辑器模板中并执行自动完成操作。

但是,保存更改后,该框不会保存。我如何确保Kendo仍然将其用作我的模型的字段,还可以用作自动完成控件?

网格:

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

自动完成(在编辑器模板中):

@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>

1 个答案:

答案 0 :(得分:2)

试试这个:

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

将AutoCompleteFor更改为自动完成。 我在一些自定义弹出窗口中使用自动完成功能,一切正常。 模型应该绑定到.Name(&#34; Supplier&#34;),它应该与object属性相同。您不必指定匿名类型。

对于数据源读取我返回字符串列表

以下是我的工作代码示例。

自定义弹出窗口:

@model Charts.Models.Machine

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

型号:

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

    }

数据源阅读:

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

    return Json(list, JsonRequestBehavior.AllowGet);
}