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

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

我想我可以使用一个列模板（而不是编辑器）来实现这一点，如下所示

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;
 }

函数createComboTemplate（dataItem）{
var tmpl=“”；
返回tmpl；
}

完整代码

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

如果我将整个网格的“可编辑”属性设置为false，那么当我单击组合框时，它将保持在那里，但是它是空的

在本例中，combobox数据源是通过一个函数实现的，我还尝试直接设置为一个全局列表对象（如果问题出在函数调用上），但这也不起作用

我这里有几个相关的问题

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

函数createCombo（容器、选项、数据）{
var dataField=options.field.split（'.'）；
var fieldName=数据字段[0]；
变量输入=$（''）
input.appendTo（容器）
input.KENDOCOMBOX({
自动绑定：是的，
过滤器：“包含”，
占位符：“选择…”，
建议：是的，
dataTextField:“显示”，
dataValueField:“rego”，
数据源：数据，
值：options.model[fieldName].rego，
更改：功能（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”等名称

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

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

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

为什么组合没有数据

还是我走错了方向

提前感谢您的帮助

属性名称的前缀似乎是“k-data”，然后 camelcase名称转换为“破折号”语法（类似于 （有角度）。这就是我们要遵守的规则吗

是-文档是

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

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

为什么组合没有数据

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

  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" />';

var tmpl=''；

为此，您需要为每个数据项提供一个对汽车数据的引用（您不能在那里执行函数，模板是根据kendo.data.Model实例计算的）

---

（更新）

非常感谢拉尔斯！那很好用。我正在研究您将事件扩展并添加到网格中的技术（与此上的doco一起）。非常令人印象深刻，而且能够做到这一点似乎确实非常强大。我有很多事情要学。再次感谢。回顾这一点，我刚刚意识到，当组合中的值更新时，调用缺少一件事（因此我可以设置基础模型数据）。我在调用k-on-change=“handleDDLChange（kendoEvent，dataItem）中添加了这里..但是handleDDLChange没有被调用。我这里的语法有错误吗？是的，change函数不在范围内，所以像car源代码一样，您需要在dataItem上为它创建一个引用：好的，非常感谢您！我还有一个谜题（我想一旦调用了此事件，我就可以计算出来）。我想设置所选的值。当使用组合作为编辑器时，您之前演示过我可以通过..options.model[fieldName]['rego']=dataItem.rego执行此操作；我在这两个参数中都查找了，但就是找不到字段名（我可以看到值、prev值等，但看不到字段名（甚至尝试将其传递到回调中）。我会找到它，这样我就可以存储模型（我假设数据项就是模型）？干杯，是的，我看到了。非常感谢。现在我可以使用kendoEvent.sender.\u selectedValue；和kendoEvent.sender.\u prev中的值进行设置（奇怪的名字，但似乎有选定的值）。再次干杯

  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" />';