Как использовать ComboBox в качестве столбца сетки Kendo UI?

Я работаю с сеткой кендо и пытаюсь сделать поле «Имя» полем со списком, имеющим собственный источник данных. Я не получаю ошибку 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.


person Frankie    schedule 04.03.2012    source источник
comment
Когда я нажимаю «Изменить», он не дает мне ComboBox в поле имени. Это просто дает мне поле ввода.   -  person Frankie    schedule 05.03.2012
comment
Что происходит, когда вы вводите дополнение ввода как ‹input вместо </gt?   -  person Chris Dixon    schedule 05.03.2012
comment
@Frankie: Итак, Фрэнки, ты обновил свою версию или использовал хак?   -  person J. Bruni    schedule 14.03.2012
comment
@ J.Bruni Я действительно обновил версию. Спасибо.   -  person Frankie    schedule 20.03.2012
comment
Ну, это воняет, потому что это был мой ответ, который предложил обновить по сравнению с Бруни, чтобы взломать.   -  person Joel D'Souza    schedule 21.03.2012


Ответы (4)


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

...вот мой обходной путь... измените строку #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.

person J. Bruni    schedule 09.03.2012

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

Кроме того, я

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

Вот созданный мной образец, который поможет вам двигаться в правильном направлении:

person Joel D'Souza    schedule 08.03.2012
comment
Я использую пользовательские редакторы с более старой версией 2011.3.1129 (с измененной одной строкой кода) - person J. Bruni; 09.03.2012
comment
Я не понимаю. Версия 2011.3.1407 — это официальный выпуск пакета обновления (не бета-версия) для KendoUI, который содержит упомянутую вами единственную строку изменения кода, а также другие улучшения. Почему бы вам просто не использовать это вместо этого? - person Joel D'Souza; 09.03.2012
comment
1) Это произошло в январе, до выхода SP; 2) Вы оплатите мне коммерческую лицензию? :) Я использую лицензию с открытым исходным кодом (GPL) — так что это последняя стабильная версия, которую я могу загрузить и использовать. - person J. Bruni; 09.03.2012
comment
Поскольку Фрэнки специально не упомянул об этом, я предположил, что он заплатил за продукт (как и я). Ваш хак работает для тех, кто использует версию с открытым исходным кодом, которая, я уверен, увидит новую версию на следующей неделе (или около того). - person Joel D'Souza; 21.03.2012

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

person Atanas Korchev    schedule 25.03.2012
comment
В этом примере показана сетка со столбцами «Название продукта», «Категория» и «Цена». Но в исходном коде я вижу columns.Bound(p => p.OrderID); columns.Bound(p => p.Employee).ClientTemplate(#=Employee.EmployeeName#); columns.Bound(p => p.ShipAddress); - person Dmitry Pavlov; 26.02.2013

Я использую 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 или Ma будет выбирать скрыть

person Cuong Cuong    schedule 06.03.2015
comment
Добро пожаловать в StackOverflow. К вашему сведению, этот сайт, как правило, не одобряет дампы кода без объяснения причин. Было бы полезно добавить некоторое объяснение того, почему этот код решает проблему спрашивающего. - person numaroth; 09.03.2015