javascript - 剑道网格 : how to use a column template so editor always available?

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

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

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

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

1. 组合框在我点击时消失(除非整个网格设置为不可编辑)

2. 为什么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 .我也在演示中使用了它。

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 )