网格中的 Kendo TreeView 显示“未定义”

Posted 2023-05-07

【中文标题】网格中的 Kendo TreeView 显示“未定义”

【英文标题】：Kendo TreeView in grid display 'undefined'

【发布时间】：2020-02-17 04:43:11

【问题描述】：

我有这个kendo grid demo，在outletID 列上，我想使用带有复选框的kendoTreeView，因此可以选择多个outletID。但是当编辑它时显示 undefined 结果，显示outletName 的模板也不起作用。感谢您的帮助

DEMO IN DOJO

【参考方案1】：

您的树需要设置dataTextField 和dataValueField。

您的列模板不知道在哪里查找 outletName。剑道支持1-N relationships，但我不知道N-N。

模板中的数据是网格的当前行。对于第一行，那将是 "id":"1","outletID":"LA2,LA3","accountName":"Data1"。您需要自己处理这些数据。例如：

template: "#= (data.outletID) ? data.outletID.split(',')
    .map(x => TreeData.find(y => y.outletID == x)['outletName']) : '' #"

对于编辑器，dropDownTree 的值为an array。你的行有一个字符串。你需要做两件事：

1 .在函数outletTree中初始化编辑器的值：

if (options.model) 
    ddt.value((options.model[options.field] || '').split(','))

2 。当 dropDownTree 的值发生变化时，更新您的网格行：

  change: e => 
    const value = e.sender.value();
    console.log(value)
    options.model.set(options.field, value.join(','))
  

这是一个更新的道场：https://dojo.telerik.com/@GaloisGirl/oYEGerAK。 “更新”按钮还不起作用，可能是因为数据源必须支持版本。 Here 是如何在本地数据上做的。

【讨论】：

您的回答很好，可能是正确的。但是您需要提供解决方案，例如 OP 的 dojo 的更新或代码示例。只使用外部链接不是一个好习惯。

@GaloisGirl 和 @DontVoteMeDown 感谢您的回复和dataTextField / dataValueField 解决方案，但似乎我仍然遇到模板不显示outletName 甚至没有检查的问题，需要帮助，我在这里update my demo

@DontVoteMeDown 这是错误的，我忽略了 OP 具​​有 N-N 关系而不是 1-N 的事实。我更新了我的答案。

@GaloisGirl 根据您的演示，知道为什么当我unchecked outletName 时它没有更新吗？ ，但是当我 check 或添加 outletName 时它工作正常。 update demo with working Update

从<input id="outletID" name="outletID" /> 中删除名称 - 它会导致剑道进行自己的绑定并干扰我们的绑定。