KendoUI Grid - dynamically added row - bind vm

I'm using Kendo version 2017.3.913 and I'm client-side.

All of what I'm about to describe works ... except the very last bit (typical!).

My grid is set up to call my api to return data. When the data returns I add an additional property to each record, "IsSelected", because I have a checkbox on each row. I then bind the data to the grid and apply my filters (four more checkboxes above the grid to allow filtering of the data).

Once my grid is bound I have a bound event wired up that sets the state of the checkboxes on each row depending on the data (disabled etc.). This also adds a number of rows (green) in between the data rows - like a header to indicate that the rows below are all related to each other (so imagine a green row followed by 5 white rows, then a new green row and say 3 white rows etc.). These rows that I'm adding in this fashion also have a checkbox on them - when I click this checkbox I want all the related (white) rows to become checked (<-- I haven't quite got that far).

So far so good.

The grid refreshes when I filter it so I had to come up with a way of tracking the checkboxes that are checked and re-setting their state after the grid refreshes. Previously (ie: on a different page) I managed this by using an array to store which checkboxes had been checked and then on the bound event I would run through the array and re-check the corresponding checkboxes - that turned out to be quite a lot of code in a few places. So this time I thought I'd try using the Observable Array (VM).

I got everything working up to a point - the data rows (white) keep their checkbox state between grid refreshes which is great - no need for loads of DOM work. However ...

The code that adds the header rows (green) looks like this;

chkbx.setAttribute("data-bind", "events: { change: CheckBoxClick }");

There is, of course, significantly more code in the method than that but this is the important bit (I believe). This renders correctly as;

<td>
    <input type="checkbox" data-id="196" data-bind="events: { change: CheckBoxClick }">
</td>

I have a method in my VM;

CheckBoxClick: function() {
    alert("Hello");
}

But it never gets called so I figured that the VM needed rebound as a consequence of new VM related things having been added but that VM didn't know about so I rebind the VM on the bound event of the grid like so;

kendo.bind($("#openTab"), openVM);

Unfortunately that line there is causing all the work done in the grid bound event to be destroyed, ie: no header row (green) and (although I haven't yet mentioned it) the background row colours (on the data rows) get wiped out. Basically I'm left with a plain grid. The dynamically added rows (green) don't exist to be able to click their checkboxes to be able to hit the method in the VM.

I haven't a clue why binding the VM should alter grid in this way.

Anyone have any ideas?