Kendo UI Hierarchical datagrid - 如何从详细网格编辑器模板MVVM

时间:2016-11-07 13:38:09

标签: mvvm kendo-ui kendo-grid kendo-mvvm kendo-template

我在网格中有一个网格,其中父网格在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 here),并且在子网格的弹出编辑器中,我想绑定到这个属性。所以例如在更复杂的场景中,我可以通过在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 bind上设置它,但它不适用于此jsBin(3.2016版本)。

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

在我的本地项目中,我仍然无法访问ViewModel中的事件,例如我可以text: Text,但无法events: {select: onSelect}

一旦这个事情被分类,访问这些事件最终会成为问这个问题的原因,我正在寻找一些提示,以了解发生了什么,如果我期待过多MVVM。

修改

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

2 个答案:

答案 0 :(得分:0)

试试这个,

我只是在模板中进行更改,

import csv
from collections import OrderedDict

def plot_names(file_name, names):
    temp_dict = {}
    for name in names:
            with open(file_name) as csvfile:
                reader = csv.DictReader(csvfile)
                temp_ord = OrderedDict({})
                for row in reader:
                    if name == row["name"]:
                        temp_ord[row["year"]] = row["number"]
                temp_dict[name] = temp_ord
    return temp_dict

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

答案 1 :(得分:0)

似乎从API检索数据的方式有些出乎意料,因此改变了:

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

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

文本的绑定工作。

使用事件绑定它不起作用 - 它似乎与detailGrid没有关系,但通常与grid有关,这是描述的 enter image description here