Kendo 网格：如何使用列模板使编辑器始终可用？

Question

我正在尝试创建一个网格，其中有一列编辑器始终可用，因此编辑单元格是一个 "one click" 过程。我的意思是，用户不必单击单元格首先切换到编辑模式，然后从组合框中单击 select，用户可以直接（使用鼠标）单击组合框向下箭头将其打开select 一个值。

我想我可以使用如下列模板（而不是编辑器）来做到这一点...

function createComboTemplate(dataItem) {
   var tmpl = '<input style="width:100%" ' +
    'kendo-combo-box ' +
    'k-data-text-field="\'display\'" ' +
    'k-data-value-field="\'rego\'" ' +
    'k-data-source="getCarList()"' +
    'k-value="dataItem.rego"' +
    'k-on-change="handleDDLChange(kendoEvent, dataItem)"/>';

   return tmpl;
 }

完整代码here

上面显示了组合框，但是当我单击它时，单元格会转到文本编辑字段。所以我认为可能是进入编辑模式的单元格导致了这种情况，所以我将列 editable 属性设置为 false ，但这没有任何区别。

如果我将整个网格的可编辑属性设置为 false，然后当我单击组合框时，它会停留在那里，但它是空的。

在这个例子中，组合框数据源是通过一个函数，我也尝试直接设置为一个全局列表对象（以防是函数调用出了问题），但这也没有用。

所以，我有几个相关的问题。

首先，是处理模板中的属性名称。当我用直接代码创建一个组合框时，我有如下（如上面的演示）

function createCombo(container, options, data) {
    var dataField = options.field.split('.');
    var fieldName = dataField[0];
    var input = $('<input/>')
    input.appendTo(container)
    input.kendoComboBox({
       autoBind: true,
       filter: "contains",
       placeholder: "select...",
       suggest: true,
       dataTextField: "display",
       dataValueField: "rego",
       dataSource: data,
       value: options.model[fieldName].rego,
       change: function (e) {
         var dataItem = this.dataItem();
         options.model[fieldName]['rego'] = dataItem.rego;
         options.model.set(fieldName + '.display', dataItem.display);
        }
     });
    }

所以上面的代码片段具有 "dataTextField" 和 "dataSource" 等属性，但是当我创建模板时，从我发现的另一个模板示例中，它似乎使用了 "k-data-text-field" 和 "k-data-source"。

在模板中使用的 "markup" 中是否有关于这些字段名称如何映射的任何 doco 或规则（我找不到）？属性名称似乎以 "k-data" 为前缀，然后驼峰命名转换为 "dash" 语法（类似于 angular 所做的）。这只是我们遵循的规则吗？如果不是，那么我的问题可能是上面的语法不正确。

另外一个问题当然是我做错了什么导致这2个问题

combobox一点击就消失了（除非整体，grid设置为不可编辑）
为什么combo没有数据

还是我做错了。

在此先感谢您的帮助！

Answer 1

It appear that the property names are prefixed with "k-data", and then the camelcase names converted to the "dash" syntax (similar to what angular does). IS this just the rules that we follow?

是 - 文档是 here。

The combobox disappears when I click on it (unless the whole, grid is set to non editable)

这是因为该列是可编辑的，所以它被默认编辑器替换了。您可以使用我描述的技术 here 来防止这种情况发生。我在demo中也用到了。

Why the combo has no data

您的模板无效；它应该是这样的：

  var tmpl = '<input style="width:100%" ' +
    'kendo-combo-box ' +
    'k-data-text-field="\'display\'" ' +
    'k-data-value-field="\'rego\'" ' +
    'k-data-source="dataItem.carSource"' +
    'k-value="dataItem.car.rego" />';

为了让它起作用，您需要为每个数据项提供对汽车数据的引用（您不能在那里执行函数，模板是针对 kendo.data.Model 实例进行评估的）。

（已更新 demo）

Kendo 网格：如何使用列模板使编辑器始终可用？

Kendo Grid : how to use a column template so editor always available?

javascript

kendo-ui

kendo-grid