Kendo UI Hierarchical datagrid - 如何从详细网格编辑器模板 MVVM 访问根视图模型

Posted 2023-05-07

【中文标题】Kendo UI Hierarchical datagrid - 如何从详细网格编辑器模板 MVVM 访问根视图模型

【英文标题】：Kendo UI Hierarchical datagrid - How to access root viewModel from detail grid editor template MVVM

【发布时间】：2017-03-20 21:06:16

【问题描述】：

我在网格中有一个网格，父网格在 MVVM 中构建，子网格在其 data-detail-init http://jsbin.com/kuvejuw 上初始化

<div data-role="grid"
     data-columns="[
                    'field': 'FirstName',
                    'field': 'LastName'  
                   ]"
     data-bind="source: dataSource"
     data-detail-init="viewModel.detailInit"
     >
</div>

如果在 viewModel 上有一个自定义属性（例如这里的 Text），并且在子网格的弹出编辑器中，我想绑定到这个属性。所以例如在更复杂的场景中，我可以通过在 viewModel 上有一个数组（或可观察数组）来填充一个包含一系列值的下拉列表。

var viewModel = kendo.observable(
  dataSource: new kendo.data.DataSource ... // everything works here,
  detailInit: detailInit,
  Text: "This text should be displayed in editor in detail's grid",
);  

kendo.bind(document.body, viewModel);

问题是在细节网格编辑器的模板中无法检测到这个属性（或整体 viewModel）：

function detailInit(e)
...    
editable: 
          mode: "popup",
          template: kendo.template($("#child-editor-template").html())
        
...

模板是这样构建的：

  <script type="text/x-kendo-template" id="child-editor-template">
     <span data-bind="text: Text"></span> 
  </script>

但我也试过data-bind="text:viewModel.Text"。我尝试了各种解决方案，在 detailGrid 的编辑事件中设置 viewModel 上的 Text 属性，或者在 viewModel 绑定上设置它，但是它不适用于这个 jsBin（3.2016 版本）。

现在有趣的是，我实际上能够在本地项目中使用 2015v3 Kendo UI 访问此属性，但我无法在此 jsBin 中复制它。

在我的本地项目中，尽管我仍然无法访问 ViewModel 中的事件，例如我可以做text: Text，但做不到events: select: onSelect。

访问事件最终将是在对这件事进行排序后提出这个问题的原因，如果我对 mvvm 期望过高，我正在寻找一些提示来了解正在发生的事情。

编辑：

我期待在子网格的弹出编辑器http://jsbin.com/canomux中启用这种类型的功能@

【参考方案1】：

这样试试，

我只是在您的模板中进行更改，

 <script type="text/x-kendo-template" id="child-editor-template">
   <input name="ShipCountry"/>
  </script>

http://jsbin.com/levenacari/edit?html,js,output

【讨论】：

好吧，但是我如何将它绑定到 viewModel... 我的示例非常简单，只是为了说明问题，但我需要访问 viewModel 以便在弹出窗口中进行复杂的操作，例如隐藏一些单元格 b

它会自动绑定，因为我们绑定了name的数据

@Turo 你能给我一些例子来了解你的需要吗

我想从子网格编辑器中使用父视图模型的属性。因此，子网格的编辑器会这样做：output.jsbin.com/canomux e.g.当新项目添加到子网格时

【参考方案2】：

似乎从 API 检索数据的方式有点出乎意料，所以随着变化：

options.success(e.data.Orders.results.toJSON());

到

options.success(e.data.Orders.results);

文本的绑定。

使用事件绑定它不起作用 - 似乎它与 detailGrid 无关，但通常与描述的网格有关 here