Multiple line template displays first data element only

[Charles Wiebe]

1. Kendo UI version: 2012.1.322 (CDN)
   
2. OS: Windows 7
   
3. exact browser version: Mozilla FireFox 11.0
   
4. jQuery version (if registered independently from Kendo UI): v1.7.1

Scenario: using Kendo MVVM data-binding and listview template to create a form.
What works: I can reproduce the example on http://demos.kendoui.com/web/mvvm/source.html that displays data in a table.
- I can display data in a table from a page method using this template script

<tr><td data-bind="text: Message"></td><td data-bind="text: CurrentState"></td><td data-bind="text: Subject"></td></tr>

Problem: As soon as I add multiple rows into the template script, only the first data element is populated.

<tr><td data-bind="text: Message"></td></tr><tr><td data-bind="text: CurrentState"></td></tr><tr><td data-bind="text: Subject"></td></tr>

[Charles Wiebe]

More info:  This is an MVVM/datasource interaction issue.
I had set the original category as Template because I am using a ListView template.

If the example uses a simple datasource, then data-binding occurs for all fields.

   var viewModel = kendo.observable({

        products: [

        { Subject: "Hampton Sofa", CurrentState: "989.99", Message: "hi" },

        { Subject: "Perry Sofa", CurrentState: "559.99", Message: "there" },

        { Subject: "Donovan Sofa", CurrentState: "719.99", Message: "you" },

        { Subject: "Markus Sofa", CurrentState: "839.99", Message: "how ru" }

          ]

      })

    kendo.bind($("#example"), viewModel);

});

The example works with templating and a read datasource.
However, if the example uses a read datasource with a page method, then data-binding occurs only for the first field.

    var viewModel = kendo.observable({

       workflowSource: new kendo.data.DataSource ({

            transport: {

                read: { contentType: "application/json; charset=utf-8",

                    type: "POST", dataType: "json",

                    url: crudServiceBaseUrl + "/GetW?guid=5b385c00-1a8b-4e26-9983-4ccd368e58bf"

                }

    });

    kendo.bind($("#example"), viewModel);

});

[Iliana Dyankova]

Hi Charles,

I examined your code snippets and I believe the problem is related to the row template, not to the remote data binding.
By design, MVVM expects only one row, but you pass two. Such approach breaks its logic and that is the reason you get only half of the data.

I hope this information helps. 

Greetings,
Iliana Nikolova
the Telerik team

[Charles Wiebe]

I tried alternative html as defined for a listview:

<ul><li data-bind="text: Message"></li><li data-bind="text: CurrentState"></li><li data-bind="text: Subject"></li></ul>

and had the same problem.
It appears to be related to having a datasource with a read.

[Iliana Dyankova]

Hi Charles,

I tried to reproduce your scenario and everything works as expected. Could you please provide a sample project that could be examined in details?

For convenience, my test project is available here.
 
Regards,
Iliana Nikolova
the Telerik team

[Charles Wiebe]

The jsFiddle link shows the problem perfectly.
I had no problem with data-binding to read-only text strings in the page as described in the jsFiddle example.
However, change the data-binding to a form element like 'input' and I cannot get the value to bind to the element.
I changed the script template to:

<script id="rowTemplate" type="text/x-kendo-tmpl">

               <li><input data-bind="text: Name"/></li><li data-bind="text: AverageRating"></li>

           </script>

and the input boxes were blank.

[Atanas Korchev]

Hi,

 The text binding is not supported for input elements. Use the value binding instead.

Regards,
Atanas Korchev
the Telerik team