Kendo Grid：如何使用列模板以便编辑器始终可用？

Question

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

我认为我可以使用列模板（而不是编辑器）来执行此操作，如下所示...

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

上面显示了组合框，但是一旦我单击它，单元格就会转到文本编辑字段。所以我认为可能是进入编辑模式的单元格导致了这种情况，所以我将 columns 的可编辑属性设置为 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);
        }
     });
    }

所以上面的 sn-p 有“dataTextField”和“dataSource”等属性，但是当我创建模板时，从我找到的另一个模板示例中，它似乎使用了“k-data-text”之类的名称-field”和“k-data-source”。

关于这些字段名称如何映射到模板中使用的“标记”中是否有任何文档或规则（我找不到）？似乎属性名称以“k-data”为前缀，然后将驼峰名称转换为“破折号”语法（类似于 angular 所做的）。这只是我们遵循的规则吗？如果不是，那么也许我的问题是上面的语法不正确。

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

1. 当我点击组合框时它会消失（除非整个网格设置为不可编辑）

2. 为什么组合没有数据

或者我是不是走错了路。

提前感谢您的帮助！

Answer 1

似乎属性名称以“k-data”为前缀，然后 驼峰名称转换为“破折号”语法（类似于什么 角度确实）。这只是我们遵循的规则吗？

是的 - 文档是 here。

当我点击组合框时它会消失（除非整个网格是 设置为不可编辑）

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

为什么组合没有数据

您的模板不起作用；它应该是这样的：

  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）