Javascript inside Kendo Template is giving incorrect result

Question

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>

Working Example:- [fiddle](http://jsfiddle.net/Lijo/Z86dq/15/) — LCJ, Feb 27 '14 at 19:04

OnaBai · Accepted Answer · 2014-02-27T22:29:16.607

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 filters.

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/

Thanks - [fiddle](http://jsfiddle.net/Lijo/Z86dq/15/). Though there is double bind first in the tbody and then in the td, why is Kendo showing incorrect result, rather than an error? Is there any documentation for this behaviour? — LCJ, Feb 27 '14 at 19:09

CSharper · Answer 2 · 2014-02-27T17:43:58.793

This is my syntax, but this is coming from a sub grid. So I think the syntax you need may be a little different. I think //# just becomes # if it's in the parent Grid but don't quote me on it. Looks like your missing some " " and concatenation

Here's the razor syntax for what it's worth, maybe you can convert it to your needs

.Columns(columns =>
{
    columns.Bound(x => x.FirstName).Title("First Name").ClientTemplate(
    "# if (Id == 5) { #" +
        ("<a class href='javascript: void(0);' onclick=\"return MyFunction('#=LastName#', '#= FirstName #');\">Convert</a>") +
        "# } else { #" +
                        "#= FirstName #" +
                    "# } #");
    columns.Bound(x => x.LastName).Title("Last Name");
    columns.Bound(x => x.Id).Title("User ID");    

})

So this code reads as, If the Id of the user is 5, the column will have a hyperlink that says "convert" and will call MyFunction with those parameters. If not show the user's name

I am NOT using `ASP.Net MVC`. It is complete client side code — LCJ, Feb 27 '14 at 17:50

score 0 · Answer 3 · answered Mar 01 '14 at 16:53

The problem comes from the fact that the MVVM implementation expects the template to render one element. In your case, you can use the visible binding - check an updated version of the fiddle.

    <tr data-bind="visible: IsSelected">
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
    </tr>

Javascript inside Kendo Template is giving incorrect result

3 Answers3

Linked