kendojs模板数据绑定点击事件无效

时间:2017-03-29 03:03:15

标签: kendo-ui kendo-grid

好吧,我正在使用KendoJS网格,我在.js文件中有这个代码:

var viewModel = kendo.observable({

    people: new kendo.data.DataSource(...),

    isActive:true,
    friends: new kendo.data.DataSource(...),
    selectionChanged: function(){...
    }
});

$(document).ready(function () {
    kendo.bind($("#sampleGridContainer"), viewModel);
});

在我的.html文件中,我有一个kendo网格:

<div id="sampleGridContainer">
    <div data-role="grid"
         data-columns="[...]"
         data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
         data-bind="source: people"></div>
</div>


<script id="sampleTemplate" type="text/x-kendo-template">
    <form id="sampleForm">
       ...

       <div data-container-for="somedropdown" class="k-edit-field">
            <input name="somedropdown" id="somedropdown"
                 data-role="dropdownlist"
                 data-type="text"
                 data-text-field="name"
                 data-value-field="value"
                 data-bind="value: someValue, visible: isActive, source: friends, click: selectionChanged" />
       </div>           

       ...
    </form>
</script>

现在,在我的下拉列表input元素中,someValueisActivefriends变量正常工作 - 事实上,下拉列表显示正常。但问题是未调用点击事件selectionChanged。如果我从模板中删除它,事件就会开始工作,但我的问题是当模板中可以访问同一范围内的所有其他变量时,为什么不调用事件selectionChanged

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

我也遇到过这个问题,我的解决方法是在kendoDropDownList网格事件上初始化edit

edit: function (e){
   e.container.find("input[name='somedropdown']").kendoDropDownList({
      dataTextField: "name",
      dataValueField: "value",
      data-bind="value: viewModel.someValue, visible: viewModel.isActive, source: viewModel.friends, click: viewModel.selectionChanged"
   });
}

然后html看起来像这样:

<div data-role="grid"
   data-columns="[...]"
   data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
   data-bind="source: people, events: { edit: onEdit }">
</div>

<script id="sampleTemplate" type="text/x-kendo-template">
    <form id="sampleForm">
       <div data-container-for="somedropdown" class="k-edit-field">
            <input name="somedropdown"/>
       </div>
    </form>
</script>

希望这适合你。