2

Based on answer in the question “Filtering source in a Kendo Template ”, I am using visible binding. And based on answer in the question “Javascript inside Kendo Template is giving incorrect result ”, I am avoiding double binding. But the visible binding is not doing it’s function. Why is it failing to do the filtering?

Fiddle

CODE

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

    <!----Kendo Templates-->
     <script id="row-template" type="text/x-kendo-template">
        <tr data-bind="visible: IsSelected">
           <tr>
                <td>#= name #</td>
                <td>#= age #</td>
            </tr>
        </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 }
                       ],

//            isVisibleCheck: function (e) {
//                isValid = false;
//                //person object is created using "e"
//                var person = e.data;
//                if (person.age >= 29) {
//                    isValid = true;
//                }
//                return isValid;
//            }
        });

    </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>

REFERENCES

  1. Visible binding in Kendo UI MVVM- docs.telerik
  2. Filtering source in a Kendo Template
  3. Javascript inside Kendo Template is giving incorrect result
Community
  • 1
  • 1
LCJ
  • 22,196
  • 67
  • 260
  • 418

1 Answers1

3

Soon as I took out the extra <tr></tr> from your rowTemplate, it appears to work fine.

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

See sample... http://jsbin.com/vusav/1/edit

Robin Giltner
  • 3,057
  • 2
  • 18
  • 26
  • Thanks..But I am wondering why Kendo is giving incorrect result rather than throwing error. This can cause subtle bugs that are hard to find. If it was an error that would have been more gracious. – LCJ Feb 28 '14 at 15:11
  • 1
    There is no error as far as kendo goes, so there is nothing to throw. Look at the output html.
    Lijo28
    There is nothing to error on, just some strange html being output. Notice the tr with the visible binding, doesn't contain the two databound td's.     – Robin Giltner Feb 28 '14 at 15:14