How to display only selected records in the result table

Question

There are two tables using the same source. These tables are using source binding of kendo templates. At present the source for both these tables are employees. Both these tables are displaying the same data.

Now, we need to modify it to show only check-box selected records in the result table. Also, when user clicks on the delete button on the result table, the check-box should be un-selected in the section table.

What modification do we need to do to make it work in MVVM?

enter image description here

Head

<head>
    <title>MVVM Test</title>
    <script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
    <script type="text/javascript" src="lib/kendo/js/kendo.web.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>
                <td><button type="button" data-bind="click: deleteEmployee">Delete</button></td>
          </tr>
    </script>
    <script id="selection-table-template" type="text/x-kendo-template">
          <tr>
                <td data-bind="text: name"></td>
                <td data-bind="text: age"></td>
                <td>
                  <input type="checkbox" name="selection" value="a">             
                </td>

          </tr>

    </script>

    <!--MVVM Wiring using Kendo Binding-->
    <script type="text/javascript">

        $(document).ready(function () {
            kendo.bind($("body"), viewModel);
        });

    </script>

</head>

MVVM

    <script type="text/javascript">
        var viewModel = kendo.observable({

            // model definition
            employees: [
        { name: "Lijo", age: "28" },
        { name: "Binu", age: "33" },
        { name: "Kiran", age: "29" }
        ],

            personName: "",
            personAge: "",

            //Note: Business functions  does not access any DOM elements using jquery.
            //They are referring only the objects in the view model.

            //business functions  (uses "this" keyword - e.g. this.get("employees"))
            addEmployee: function () {
                this.get("employees").push({
                    name: this.get("personName"),
                    age: this.get("personAge")
                });

                this.set("personName", "");
                this.set("personAge", "");
            },

            deleteEmployee: function (e) {

                //person object is created using "e"
                var person = e.data;

                var employees = this.get("employees");
                var index = employees.indexOf(person);
                employees.splice(index, 1);
            }

        });

    </script>

Body

<body>


    <table id="selectionTable">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </thead>
        <tbody data-template="selection-table-template" data-bind="source: employees">
        </tbody>
    </table>

  <br />
  <hr />

    <table id="resultTable">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </thead>
        <!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. -->
        <tbody data-template="row-template" data-bind="source: employees">
        </tbody>
    </table>


</body>

REFERENCES

Reference: http://stackoverflow.com/questions/20246885/kendo-ui-difference-between-observable-observableobject-and-model — LCJ, Feb 28 '14 at 14:00

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

Use a dictionary to store [employee, boolean] to store employee and the checkbox state, and bind the dictionary to the view

Check this

edited May 23 '17 at 12:20

Community

1
1

answered Feb 26 '14 at 11:25

Jimmy

3,224
5
29
47

score 1 · Accepted Answer · edited Feb 28 '14 at 09:41

First things first.

If you remove the object from the viewModel when you delete it, it will be removed from your source table as well. You would need two arrays to handle this if you wanted it to be the way you describe. But based on the first part of your question, I thought I would post a solution.

HTML

<script id="row-template" type="text/x-kendo-template">
    <tr data-bind="visible: isChecked">
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
        <td>
            <button type="button" data-bind="click: deleteEmployee">Delete</button>
        </td>
    </tr>
</script>

<script id="selection-table-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
        <td>
            <input type="checkbox" name="selection" data-bind="checked: isChecked"/>
        </td>
    </tr>
</script>

<table id="selectionTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>

<br />
<hr />

<table id="resultTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody data-template="row-template" data-bind="source: employees"/>
</table>

JAVASCRIPT

var viewModel = kendo.observable({
    employees: [
        { name: "Lijo", age: "28", isChecked: true },
        { name: "Binu", age: "33", isChecked: true },
        { name: "Kiran", age: "29", isChecked: true }
    ],

    personName: "",
    personAge: "",

    addEmployee: function () {
        this.get("employees").push({
            name: this.get("personName"),
            age: this.get("personAge")
        });

        this.set("personName", "");
        this.set("personAge", "");
    },

    deleteEmployee: function (e) {
        var person = e.data;
        var employees = this.get("employees");
        var index = employees.indexOf(person);
        var employee = employees[index];

        //set
        employee.set('isChecked', false);
    }
});


$(document).ready(function () {
    kendo.bind($("body"), viewModel);
});

JSFiddle

Fiddle

Summary

Use data-bind="visible: isChecked" in "row-template" to show only selected records in the bottom table.

Make template for checkbox as

    <input type="checkbox" name="selection" data-bind="checked: isChecked"/>

In the delete function, use following

    employee.set('isChecked', false);

If I am clicking "Delete" button in the bottom table, only unchecking should happen in the top table. But now the record is getting disappeared from the top table. How can we fix it? — LCJ, Feb 27 '14 at 18:30
sorry, instead of employee.isChecked = false; it should be employee.set('isChecked', false); — Jason, Feb 27 '14 at 18:48
Thanks for that I deleted the comment and I updated the answer with what you wanted as well as the fiddle. Good luck! — Jason, Feb 27 '14 at 18:55
It shows up on my screen as well as the fiddle. Hmm, not sure man.. I have to get back to work though. — Jason, Feb 27 '14 at 19:07

How to display only selected records in the result table

2 Answers2

HTML

JAVASCRIPT

JSFiddle

Summary

Linked