0
votes

I am trying to add a checkbox to a kendo grid's group header. This checkbox needs to have it's checked value bound to a function, and a click event bound to a function. However when I click the box, it does not even try to fire the click event. Currently the code I have is this

Grid Group Header template

<script type="text/x-kendo-template" id="group-header-email-checkbox-template">
    <input type="checkbox" class="chkdbox emailCheckBox" data-bind="checked: emailSelected("#:value#"), events: {click: onEmailCheck}" />&nbsp;&nbsp;#:value#
</script>

JS

    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;
    }

This is being used to build a list of companies to send emails to, where the grid is grouped on the company information.

2

2 Answers

0
votes

By default, the header and footer of the Grid are not bound to the ViewModel. A workaround is to find the header with an appropriate jquery selector after the grid has been initialised and then bind it manually. So something like this:

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

See here for more info: https://www.telerik.com/forums/tooltip-mvvm-control-inside-grid-column-headertemplate-is-not-working

And here for a very similar answer I wrote about binding the grid footer: kendo grid column: how to data bind click event in footer template?

0
votes

I ended up adding the click event through jquery.

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

With this template.

<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>

Though this still gave me an issue when paging, they didn't persist in any way, I solved the persistence problem this way -

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);
                }
        });
    },