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: /
CODE
<html>
<head>
<title>Template Filtering</title>
<script src=".9.1.min.js"></script>
<script src=".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>
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/Lijo/Z86dq/4/
CODE
<html>
<head>
<title>Template Filtering</title>
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic./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 – LCJ Commented Feb 27, 2014 at 19:04
3 Answers
Reset to default 7Try 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/OnaBai/Z86dq/16/
This is my syntax, but this is ing from a sub grid. So I think the syntax you need may be a little different. I think //# just bees # 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
The problem es 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>