This is a migrated thread and some comments may be shown as answers.

Determining parent scope of object in data template

8 Answers 235 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Brian Vallelunga
Top achievements
Rank 1
Brian Vallelunga asked on 25 Apr 2012, 02:25 PM
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

8 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 01 May 2012, 01:35 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian Vallelunga
Top achievements
Rank 1
answered on 02 May 2012, 01:36 AM
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.
0
Accepted
Alex Gyoshev
Telerik team
answered on 02 May 2012, 12:01 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian Vallelunga
Top achievements
Rank 1
answered on 03 May 2012, 07:56 PM
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.
0
Alex Gyoshev
Telerik team
answered on 04 May 2012, 11:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian Vallelunga
Top achievements
Rank 1
answered on 04 May 2012, 01:27 PM
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.
0
Rosen
Telerik team
answered on 07 May 2012, 01:41 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian Vallelunga
Top achievements
Rank 1
answered on 07 May 2012, 02:34 PM
Great to hear, thanks.
Tags
MVVM
Asked by
Brian Vallelunga
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Brian Vallelunga
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or