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

上面显示了组合框，但是一旦我点击它，单元格就会转到文本编辑字段。所以我认为也许进入编辑模式的单元格导致了这种情况，因此我将列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“。

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

另一个问题当然是，我做错了导致2个问题

单击它时组合框消失（除非整个网格设置为不可编辑）
为什么组合没有数据

或者我是以错误的方式解决这个问题。

提前感谢您的帮助！

Answer 1

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

是 - 文档为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）

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

1 个答案: