Determining parent scope of object in data template

[Brian Vallelunga]

I have a fairly complex MVVM configuration that looks like the following:

ViewModel
    Groups
       Sections
           Rows

So, my view model contains groups, which contain sections, which contain rows. MVVM and data-templating is perfect for this type of scenario, but I'm hitting a few stumbling blocks trying to use Kendo's MVVM implementation.

Specifically, when I render a Row, I need to include a button to delete that row. Templating this is simple enough to do and I bind the click event handler to a removeRow function.

This is where I have two questions:

1) Can the removeRow function exist on my Section model instead of the root view model? I've tried to do this and it doesn't seem to work.

2) If removeRow must be on the root view model, is there a method of determining which Section the row existed in? Right now, at the root view model, I'd have to search through all groups, and then all sections, and then all rows to find out which array contains the row specified by e.data. Can I provide an additional parameter to be passed to my removeRow event handler that specifies the containing section?

Thanks

[Alex Gyoshev]

Hello Brian,

Can you please provide some example of your ViewModel? This will greatly help us in understanding the issue. We have prepared a basic jsFiddle that you can start from.

Kind regards,

Alex Gyoshev
the Telerik team

[Brian Vallelunga]

I've updated the sample at: http://jsfiddle.net/8LLxL/2/

If you look, the "removeRowFromModel" function will be called when the corresponding button is clicked, but the "removeRowFromSection" function will not be called, which would be useful.

Alternatively, if I could pass an argument to the "removeRowFromModel" function that passed in the row's parent section, that would also be fine.

[Alex Gyoshev]

Hello Brian,

Having a removeRowFromSection function defined in each section would not be optimal, as it will encourage repetition. In the latest internal builds, the MVVM supports the parent() function that allows you to get the parent scope of the row:

var model = {
    removeRow: function(e) {
        e.preventDefault();
        var row = e.data, rows = row.parent();
        rows.splice(rows.indexOf(row), 1);
    },
    /* ... */
}

Hope this helps,
Alex Gyoshev
the Telerik team

[Brian Vallelunga]

The internal build's parent function does help me considerably in this situation, thanks. I have a follow-up question though.

I've updated the fiddle at: http://jsfiddle.net/8LLxL/5/ 

In this version, everything seems to work. That is, it works until you try it with the latest internal build of Kendo. With the latest internal build, the removeRow function does not fire. I suspect this is due to the template setting the data source to "this" in the "row-template" script block, but that's just a hunch.

[Alex Gyoshev]

Hello Brian,

Such use of "this" is more of a side-effect than a feature, and is currently not supported. If you inline the hello-row-template and world-row-template into the row template, it will work.

Greetings,
Alex Gyoshev
the Telerik team

[Brian Vallelunga]

The "this" method I'm using is described in the documentation at: http://www.kendoui.com/documentation/framework/mvvm/bindings/source.aspx 

This sort of feature, or something that lets me break up templates into multiple files is essential for building real-world applications.

I love the Kendo widgets, but the MVVM framework just doesn't quite seem to be there yet. I could move to Knockout, but then I don't get the easy instantiation and bindings to widgets. This is a tough position to be in.

[Rosen]

Hello Brian,

We were able to identify the cause for the issue you are facing and it will be resolved with the next internal build.

Greetings,
Rosen
the Telerik team

[Brian Vallelunga]

Great to hear, thanks.