0

I have following Kendo template and MVVM binding. Source for this is template is viewModel that has employees inside it. The employees collection has 3 records in it. I need to display only those records for which the IsSelected property is true.

<!----Kendo Templates-->
<script id="row-template" type="text/x-kendo-template">
      <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: age"></td>
      </tr>
</script>


employees: [
                    { name: "Lijo", age: "28", IsSelected: true },
                    { name: "Binu", age: "33", IsSelected: false },
                    { name: "Kiran", age: "29", IsSelected: false }
                   ]

QUESTION

How can we specify this filtering inside the template?

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

REFERENCES

  1. KendoUI Check Boxes in a Grid: how to and some tips and tricks
  2. Filter kendo ui grid with filed type object
  3. Filter Array|Object
  4. MVVM / Source and template binding
  5. how to run a function inside a template
Community
  • 1
  • 1
LCJ
  • 22,196
  • 67
  • 260
  • 418

1 Answers1

1

Use the visible binding...

Use visible binding

<script id="row-template" type="text/x-kendo-template">
    <tr data-bind="visible: IsSelected">
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
    </tr>
</script>
Jason
  • 291
  • 2
  • 6
  • I tried the first approach. But it is giving wrong result. Please test it by making following change - `{ name: "Kiran", age: "29", IsSelected: true }`.. But the second record is appearing in the result rather than the 3rd. – LCJ Feb 27 '14 at 16:03
  • 1
    Both work, you can play around with it here: [http://jsfiddle.net/jsonsee/Z86dq/](http://jsfiddle.net/jsonsee/Z86dq/) – Jason Feb 27 '14 at 16:16
  • Can you please tell why this fiddle is giving wrong results - http://jsfiddle.net/Lijo/Z86dq/2/? – LCJ Feb 27 '14 at 16:30
  • I think its a case where you are using JSFiddle incorrectly. The top left pane is for html (minus head/body tags), the top right pane is for css, and the middle pane is for JS. Also, you have a document.ready closure in your template. You don't need that there. – Jason Feb 27 '14 at 16:38
  • ok, I took your fiddle and updated it for JSFiddle... its basically the same thing I posted before. [http://jsfiddle.net/jsonsee/Z86dq/](http://jsfiddle.net/jsonsee/Z86dq/) – Jason Feb 27 '14 at 16:43
  • Also, please note after making changes to the fiddle, you have to hit the 'Run' button. – Jason Feb 27 '14 at 16:44
  • Even your updated fiddle is giving incorrect result. Please see http://jsfiddle.net/Lijo/Z86dq/4/ – LCJ Feb 27 '14 at 16:50
  • 1
    I see what you mean, I reduced the answer to what I would do... try it and see. – Jason Feb 27 '14 at 17:11