Kendo UI MVC Grid,自动编辑可编辑列

时间:2017-04-12 08:46:34

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

我有以下网格:

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

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

1 个答案:

答案 0 :(得分: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>"))