Как использовать ComboBox в качестве столбца таблицы пользовательских интерфейсов Kendo?

Question

Я работаю с сеткой кендо, и я пытаюсь сделать поле Name полем, у которого есть собственный источник данных. Я не получаю ошибку javascript, но когда я иду редактировать поле имени в сетке, он не показывает ComboBox. Он по-прежнему показывает поле ввода.

$(function() { 

    console.log("ready"); 

    var datasource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "", // Returns all items 
       dataType: "json" 
      } 
     }, 
     pageSize: 10, 
     schema: { 
      model: { 
       id: "Id", 
       fields: { 
        Id: { type: "number", editable: false, nullable: false, visible: false }, 
        Name: { type: "string", editable: true, nullable: false, validation: { required: true} }, 
        Description: { type: "string", editable: true, validation: { required: true} }       
       } 
      } 
     } 
    }); 

    var grid = $("#grid").kendoGrid({ 
     dataSource: datasource, 
     editable: true, 
     height: 400, 
     columns: [ 
      { field: "Id", width: 200 }, 
      {      
       field: "Name", 
       editor: function (container, options) {  // This is where you can set other control types for the field.                 
        $('< input name="' + options.field + '"/>').appendTo(container).kendoComboBox({ 
         dataSouce: [{ Id: "1", Name: "MaryMaryMary" }, { Id: "2", Name: "John"}], 
         dataValueField: "Id", 
         dataTextField: "Name",        
        }); 
       } 
      } 
     ], 
     dataBound: function (e) { 
      console.log("DataBound"); 
     } 
    }); 

}); 

У меня нет ошибок javascript.

Answer 1

Для тех, кто «отчаянно» нужен собственный редактор в настоящее время и не может ждать следующего релиза, так же, как я ... :-)

... вот мой обходной путь ... изменение строки # 12320 из kendo.all.js к этому:

fields: { field: column.field, format: column.format, editor: column.editor }, 

... и вуаля! Теперь настройка «редактора» для столбца вступает в силу!

---

я написал выше сообщение на http://www.kendoui.com/forums/ui/grid/how-to-define-memo-style-editor-for-grid-cells.aspx#1938316

Это было 6 января 2012, и текущий релиз был v2011.3.1129

Answer 2

Какую версию KendoUI вы используете? Только недавно SP1 и бета марта имеют пользовательскую поддержку редактора: http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js

Кроме того, я

1. заменен < и > с < и >;
2. исправил свойство «dataSouce» с ошибкой, созданное для KendoComboBox.

Here's a sample, что я создал, что вы должны получить идут в правильном направлении:

Answer 3

Мы опубликовали example, показывающий, как это сделать.

Answer 4

Я использую MVC4
В сетке:

columns.Bound("Productname").Title("Productname")      
    .Width(200)           
    .EditorTemplateName(Productname); 

Создать EditorTemplateName = Productname.
В видовой доле:

@(Html.Kendo().ComboBox() 
      .Name("Ten_dvt") 
      .DataValueField("Ten_dvt") 
     .DataTextField("Ten_dvt") 
     .Filter(FilterType.Contains) 
     .HighlightFirst(true) 
     .DataSource(source => 
     { 
      source.Read(read => 
      { 
       read.Action("Dm_dvt", "Combo"); 
      }); 
     }) .Events(e => e.Select("Select_Ma_dvt").Change("Change_Ma_dvt")) 
    .HeaderTemplate("<table style=\"width:100%\"><tr><td align=\"left\" 
    style=\"width:30%\">" + @Tcommont("Ma") + "</td><td align=\"left\" 
    style=\"width:70%\">" + @Tcommont("Ten") + "</td></tr></table>") 
     .Template("<table style=\"width:100%\"><tr><td align=\"left\" style=\"width:30%\">" + "#: data.Ma_dvt #" + "</td><td align=\"left\" 
    style=\"width:70%\">" + "#: data.Ten_dvt #" + "</td></tr></table>" + 
    "<div style='width:0px; height:0px; 
    overflow:hidden'>;#:data.Ma_dvt#;#:data.Ten_dvt#;</div>")) 

Затем формирует редактировать с помощью:

function Change_Ma_dvt(e) { if (this.selectedIndex == -1) { 
           var grid = $("#gridItem2").data("kendoGrid"); 
           var _dataItem = grid.dataItem(grid.select()); 
           _dataItem.set("Ten_dvt", ""); 
           _dataItem.set("Ma_dvt", ""); 
          } } 

и

function Select_Ma_dvt(e) { var _Arr = e.item.text().split(";"); 
          var grid = $("#gridItem2").data("kendoGrid"); 
          var _dataItem = grid.dataItem(grid.select()); 
          _dataItem.set("Ma_dvt", _Arr[1]); 
          break; } 

последней сетка названия шоу, и вы выбираете то Id или Мо будет выбрать скрыть