Question

我正在尝试为kendo网格的组头添加一个复选框。此复选框需要将其检查值绑定到函数，并将click事件绑定到函数。但是，当我单击该框时，它甚至不会尝试触发click事件。目前我的代码就是这个

网格组标题模板

    checkEmail:function(e) {
        var me = this;
        console.log(e);
    },
    emailSelected:function(val) {
        var me = this;
        var email = _.find(me.selectedEmails,
            function(e) { return e.name === val }
        );
        return email;
    }

JS

['x', 'x', 'x..', 'x']

这用于建立一个公司列表，用于发送电子邮件，网格按公司信息分组。

Answer 1

默认情况下，Grid的页眉和页脚未绑定到ViewModel。解决方法是在初始化网格后使用适当的jquery选择器查找标头，然后手动绑定它。所以像这样：

kendo.bind($("body"), viewModel);  //Instantiate the grid
kendo.bind($("#grid").find(".k-grid thead"), viewModel); //Find and bind the header

有关详细信息，请参阅此处：docs

这里有一个非常相似的答案，我写过关于绑定网格页脚的问题：https://www.telerik.com/forums/tooltip-mvvm-control-inside-grid-column-headertemplate-is-not-working

Answer 2

我最终通过jquery添加了click事件。

$(".emailCheckBox").on("change", function(e) {
    me.checkEmail(e);
});

使用此模板。

<script type="text/x-kendo-template" id="group-header-email-checkbox-template">
    <input type="checkbox" class="chkdbox emailCheckBox" data-company="#:value#" />&nbsp;&nbsp;#:value#
</script>

虽然在分页时这仍然给我一个问题，但它们并没有以任何方式存在，我用这种方式解决了持久性问题 -

setHeaderChecks:function() {
    var me = this;
    $(".agingEmailCheckBox").each(function() {
                var value = $(this).data("company");
                var checked = _.find(me.selectedCompanies, function(e) { return e.company === value });
                if (checked) {
                    $(this).prop("checked", true);
                }
        });
    },

单击kendo网格组标题上的事件

2 个答案: