Mvvm: grid from array of arrays

[RobMarz]

I'd like to build a grid of divs.
I have an array of arrays, like this:

[ [ { "value": "0"}, { "value": "1", } ] ]

(Sorry, but I can't indent the code properly in the editor.)

I can't do it with MVVM.

This is how I do it:

Template container:

<div data-bind="source: matrix" data-template="frame-cells-row-tmpl">
</div>

Template row:

<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
    <div class="frame-grid-row" data-bind="source: data" data-template="frame-cells-col-tmpl">
    </div>
</script>

Template col:

<script type="text/x-kendo-template" id="frame-cells-col-tmpl">
    <div class="frame-grid-col">
         #: value #
    </div>
</script>

The error I get is:

Uncaught TypeError: e.bind is not a function

 

It works fine if I do this:

<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
    <div class="frame-grid-row" >

 ## for(var i=0; i < data.length; i++) { ##
<div class="frame-grid-cell">
 ##= data[i].value ##
            </div>
 ## } ##

    </div>
</script>

Why can't I use MVVM?

In the "row" template, is "data" the correct variable name for "source"?

Many thanks!

[Neli]

Hello Roberto,

Kendo MVVM's source binding is designed for binding a collection to a template, but it does not support nested source bindings inside another template. When you try to use data-bind="source: data" within your row template, MVVM expects data to be an observable array or object, but in this context, it cannot rebind nested arrays. This is why you see the error Uncaught TypeError: e.bind is not a function—the MVVM engine is attempting to bind something that isn't a valid observable or object.

Is "data" the Correct Variable Name in Row Template?

Yes, inside the Kendo template, data refers to the current item from the parent source binding. In your scenario, each item in matrix is itself an array, so data in the row template is an array. However, you cannot use data-bind="source: data" inside the template, because MVVM does not support recursive/nested source bindings.

For nested arrays (like your matrix), use the Kendo template syntax with JavaScript for loops, as you did in your working example. This allows you to manually iterate over the inner arrays and render your grid as needed.

<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
    <div class="frame-grid-row">
        ## for(var i = 0; i < data.length; i++) { ##
            <div class="frame-grid-cell">
                ##= data[i].value ##
            </div>
        ## } ##
    </div>
</script>

If you want to use MVVM bindings, you would need to flatten your data structure to a single array or use a different approach, as MVVM works best with flat arrays.

Regards,
Neli
Progress Telerik