Multiple line template displays first data element only

7 posts, 1 answers
  1. Charles Wiebe
    Charles Wiebe avatar
    11 posts
    Member since:
    Feb 2010

    Posted 02 Apr 2012 Link to this post

    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>
  2. Charles Wiebe
    Charles Wiebe avatar
    11 posts
    Member since:
    Feb 2010

    Posted 03 Apr 2012 Link to this post

    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);
    });
  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 05 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Charles Wiebe
    Charles Wiebe avatar
    11 posts
    Member since:
    Feb 2010

    Posted 05 Apr 2012 Link to this post

    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.
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 09 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Charles Wiebe
    Charles Wiebe avatar
    11 posts
    Member since:
    Feb 2010

    Posted 09 Apr 2012 Link to this post

    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.
  8. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 10 Apr 2012 Link to this post

    Hi,

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

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready