knockout row/header templates inside of Kendo UI Grid

[AaronBastian]

I have a Kendo Grid that can contain N number of subgrids, nested 5 grids deep. Each of these grids contains a header template that has a button with a click binding, and text inputs with text bindings that are bound to properties on the ViewModel, and row templates that essentially have the same thing.

These "inner" grid items are not initially bound to view model functions or properties unless ko.applyBindings is being called again on the body of the grid in the databound handler, which fires every time that a new subgrid opens, which then duplicates the bindings.

Looking for a way to bind recursively throughout subgrids with knockout templats, without duplicating the bindings.

[rniemeyer]

@AaronBastian - can you possibly produce a sample in jsFiddle or send me something (ryan at knockmeout dot net). I would definitely like to help you find a way to make this work.

[AaronBastian]

I have created a jsFiddle here to try to demonstrate my problem: http://jsfiddle.net/aaronbastian/XhDdC/1/

Sorry for the sloppy data; the web api does not yet exist in production and cannot yet be accessed publicly, so I had to eliminate AJAX calls and replace them with JSON……

Basically, I have gotten the row templates to work without creating multiple bindings by using: ko.bindingHandlers.kendoGrid.options.dataBound = function(data) { var body = this.element.find("tbody")[0];

    if (body) {
       ko.applyBindings(ko.dataFor(body), body);   
    }
};

As you had previously suggested in http://stackoverflow.com/questions/13858087/kendo-knockout-calling-a-method-that-changes-viewmodel-property-from-a-template

However, I am still unable to get any bindings to work in the header templates. I have an Add button for each grid, and a text input for each column in each grid. The button is bound to a function in the view model called “AddNew”, and the value of each text box is bound to a view model property, “Name”, “City”, and “State” respectively. None of these bindings appear to work at all, no matter how I try to specify the view model ($root., $parent., etc).

In the row templates, I am also unable to get the value of the row’s record in which a button had been clicked. The object that is passed to that function does not appear to contain any record information on that row, rather just contains the html element’s attributes.

Any help would be greatly appreciated. Thanks again!

[michaelaird]

We used the above solution for header templates for a while but in Knockout 3.0, this causes errors about "You cannot apply bindings multiple times to the same element.".

Is there a different solution that works with Knockout 3?

[henrysmith]

Hi, this partially solved my issue.. It's pretty similar but in a column template not in the header. The only one problem i can see applying this:

   var dataBound = function () {
            var body = this.element.find("tbody")[0];

            if (body) {
                ko.cleanNode(body);
                ko.applyBindings(ko.dataFor(body), body);
            }
        }

The binding context that applies to the element is the full View Model and that the row context as I was expecting. Having something like:

column.template = "<a data-bind=\" click: popup \">${status}";

In popup function what I get as parameter is the full VM instead of the row item context.

Henry,