Javascript Inside Kendo Template Is Giving Incorrect Result

I have a template with javascript inside it # if(IsSelected) { # <

Solution 1:

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:

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

and your JavaScript code as:

vards=newkendo.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/

Solution 2:

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

Solution 3:

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.

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