Kendo UI MVC Grid, autocomplate für editierbare Spalte

Question

Ich habe folgendes Raster:

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

und die folgende EditorTemplate für die automatische Vervollständigung

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

So ist die automatische Vervollständigung bietet mir mit den richtigen Daten auf Tastendruck aber nachdem ich ein Element ausgewählt habe, zeigt es den Code nur für die Zeit an, in der das Eingabefeld fokussiert ist. Wenn ich den Fokus aus dem Autocomplete-Feld entferne, wird er ausgeblendet. Hat jemand eine Idee, woher kommt das Problem?

Answer 1

Ersetzen Sie den Code Ihrer Editorvorlage durch Folgendes. Hoffe, es funktioniert

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