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

Posted 2023-05-07

【中文标题】Kendo Grid：如何使用列模板以便编辑器始终可用？

【英文标题】：Kendo Grid : how to use a column template so editor always available?

【发布时间】：2015-04-23 18:41:10

【问题描述】：

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

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

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】：

似乎属性名称以“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）

【讨论】：

非常感谢拉斯！这很完美。我正在研究您将事件扩展和添加到网格的技术（连同关于此的 doco）。非常令人印象深刻，能够做到这一点似乎确实非常强大。我有很多学习要做。再次感谢。

刚刚复习一遍，我刚刚意识到当组合中的值更新时，有一件事丢失了调用（因此我可以设置基础模型数据）。我在这里添加了调用 k-on-change="handleDDLChange(kendoEvent, dataItem) .. jsfiddle.net/peterjc/1uk2kg79/3 但未调用 handleDDLChange。我这里的语法错误吗？

是的，更改函数不在范围内，所以像汽车源一样，您需要在 dataItem 上为其创建引用：jsfiddle.net/1uk2kg79/4

好的，非常感谢您一次获得！我确实还有一块拼图（我认为一旦我调用了这个事件，我就能弄清楚）。我想设置选定的值。当使用组合作为编辑器时，您之前展示了我可以通过 .. options.model[fieldName]['rego'] = dataItem.rego;我在两个参数中到处都找过了，但找不到字段名称（我可以看到值、上一个值等，但看不到字段名称（甚至尝试将其传递给回调）。会找到这个，所以我可以 st 模型（我假设 dataItem 是模型）？干杯

太好了，我明白了。非常感谢你。现在我可以设置它，使用来自 kendoEvent.sender._selectedValue;和 kendoEvent.sender._prev 的值（奇怪的名称，但似乎具有选定的值）。再次干杯