Javascript inside Kendo Template is giving incorrect result

javascript, jquery, kendo-ui

Solution

Try defining the template as:

<script id="row-template" type="text/x-kendo-template">
    # if(IsSelected) { #
    <tr>
        <td>#= name #</td>
        <td>#= age #</td>
    </tr>
    # } #
</script>

in order to avoid a double bind first in the `tbody` and then in the `td`.

EDIT: In order to avoid the problems with the error that throws KendoUI, I would change your code a little and instead of using a `kendo.observable` I would use a `DataSource` that implements `filter`s.

So, you don't need to print or not the row in your template but setting the filter condition in the `DataSource`.

Define the template as follow:

<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td>#= name #</td>
        <td>#= age #</td>
    </tr>
</script>

and your JavaScript code as:

var ds = new kendo.data.DataSource({
    data  : {
        employees: [
            { name: "Lijo", age: "28", IsSelected: true },
            { name: "Binu", age: "33", IsSelected: false },
            { name: "Kiran", age: "29", IsSelected: true }
        ]
    },
    schema: {
        data: "employees"
    },
    filter: { field: "IsSelected", operator: "eq", value: true }
});

Where I set a `filter` that filters out elements where `isSelected` is not equal to `true`.

Then initialize a ListView as follow:

$("#list").kendoListView({
    dataSource: ds,
    template  : $("#row-template").html()
});

You can see the code here: http://jsfiddle.net/OnaBai/Z86dq/16/

Problem

I have a template with javascript inside it ``` # if(IsSelected) { # <tr> <td data-bind="text: name"></td> <td data-bind="text: age"></td> </tr> # } # ``` It is intended to show only those records for which the IsSelected value is true. Though it shows only two records – the records displayed are not correct. What is the reason for this? Fiddle: http://jsfiddle.net/Lijo/Z86dq/4/ CODE ``` <html> <head> <title>Template Filtering</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script> <script id="row-template" type="text/x-kendo-template"> # if(IsSelected) { # <tr> <td data-bind="text: name"></td> <td data-bind="text: age"></td> </tr> # } # </script> <!--MVVM Wiring using Kendo Binding--> <script type="text/javascript"> $(document).ready(function () { kendo.bind($("body"), viewModel); }); </script> <script type="text/javascript"> var viewModel = kendo.observable({ employees: [ { name: "Lijo", age: "28", IsSelected: true }, { name: "Binu", age: "33", IsSelected: false }, { name: "Kiran", age: "29", IsSelected: true } ] }); </script> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table id="resultTable"> <tbody data-template="row-template" data-bind="source: employees"> </tbody> </table> </body> </html> ```

Original source