Kendo UI MVC Grid，可编辑列的自动合并答案

【问题标题】：Kendo UI MVC Grid, autocomplate for editable columnKendo UI MVC Grid，可编辑列的自动合并
【发布时间】：2017-09-07 22:39:55
【问题描述】：

我有以下网格：

@(Html.Kendo().Grid<OrderLineViewModel>()
                  .Name("gridOrderLines")
                  .HtmlAttributes(new { @class = "responsiveTable" })
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.Id)
                          .Hidden()
                          .ClientTemplate("#= Id #" + "<input type='hidden' name='OrderLines[#= index(data)#].Id' value='#= Id #' />");
                      columns.Bound(p => p.Code)
                          .ClientTemplate("#= Code #" + "<input type='hidden' name='OrderLines[#= index(data)#].Code' value='#= Code #' />")
                          .EditorViewData(new { ViewBag.Items })
                          .EditorTemplateName("AutoComplete");

                      columns.Bound(p => p.Quantity)
                          .Width(150)
                          .ClientTemplate("#= Quantity #" + "<input type='hidden' name='OrderLines[#= index(data)#].Quantity' value='#= Quantity #' />");
                      columns.Command(c =>
                      {
                          c.Destroy();
                      }).Width(150);
                  })
                  .ToolBar(toolbar =>
                  {
                      toolbar.Create().Text("Add new Product");
                  })
                  .Editable(editable => editable.Mode(GridEditMode.InCell))
                  .Pageable()
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .PageSize(5)
                      .ServerOperation(false)
                      .Model(model =>
                      {
                          model.Id(y => Convert.ToString(y.Id));
                      })
                  )
            )

以及以下用于自动完成的 EditorTemplate

@(Html.Kendo().AutoComplete()
      .Name("items")
      .DataTextField("Code")
      .Filter(FilterType.StartsWith)
      .Suggest(true)
      .Placeholder("Select product...")
      .BindTo(ViewBag.Items)
      .MinLength(1)
      .Height(400)
      .HeaderTemplate("<div class=\"dropdown-header k-widget k-header\">" +
                      "<span>Code </span>" +
                      "<span>Stock</span>" +
                      "</div>")
      .FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
      .Template("<span class=\"k-state-default\"><h3>#: data.Code #</h3></span>" +
                "<span class=\"k-state-default\"><p>#: data.Stock #</p></span>")
)

因此，自动完成功能为我提供了正确的击键数据，但在我选择一个项目后，它仅在输入字段获得焦点时显示代码。当我从自动完成字段中删除焦点时，它会隐藏它。有谁知道问题出在哪里？

【问题讨论】：

标签： c# asp.net-mvc kendo-ui autocomplete kendo-grid

【解决方案1】：

将编辑器模板的代码替换为以下内容。希望它的作品

@model string
@(Html.Kendo().AutoCompleteFor(m=>m) 
  .DataTextField("Code")
  .Filter(FilterType.StartsWith)
  .Suggest(true)
  .Placeholder("Select product...")
  .BindTo(ViewBag.Items)
  .MinLength(1)
  .Height(400)
  .HeaderTemplate("<div class=\"dropdown-header k-widget k-header\">" +
                  "<span>Code </span>" +
                  "<span>Stock</span>" +
                  "</div>")
  .FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
  .Template("<span class=\"k-state-default\"><h3>#: data.Code #</h3></span>" +
            "<span class=\"k-state-default\"><p>#: data.Stock #</p></span>"))

【讨论】：