How to remove source data when I remove grid row?

[aj]

I'm sorry. My English is not good.

When I press the delete button inside the Grid, the row has deleted, but does not change the original data
Please tell me how to solve this problem

Here is a fiddle:http://jsfiddle.net/64jM3/1/

Source Code:
Html:

Source Length: <span data-bind="text: guarantorDataSourceLength"></span>
<div id="guarantorGrid"
     data-role="grid"
     data-editable='{"destroy":true}'
     data-sortable="true"
     data-pageable="false"
     data-selectable="true"
     data-bind="source: guarantorDataSource"
     data-columns='[
                        { "field": "ID", "title": "ID"},
                        { "field": "Name", "title": "Name", "width": "200px"},
                        { "field": "IsMan", "title": "IsMan"},
                        { "command": "destroy" }
                       ]'
     data-row-template="row-template">
</div>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td>
            <span data-bind="text: ID"></span>
        </td>
        <td>
            <span data-bind="text: Name"></span>
        </td>
        <td># if (IsMan === true) {# Y #} else {# N # } #</td>
        <td>
            <a class="k-button k-button-icontext k-grid-delete" href="\#" data-bind="click: delClick"><span class="k-icon k-delete"></span>Delete</a>
        </td>
    </tr>
</script>

JavsScript:

$(document).ready(function () {

    var viewModel = kendo.observable({
        guarantorDataSource: [],
        guarantorDataSourceLength: function () {
            return this.get("guarantorDataSource").length;
        }
    });



    kendo.bind($("body"), viewModel);

    viewModel.set("guarantorDataSource", [
        { ID: "A001", Name: "Tom", IsMan: true },
        { ID: "A002", Name: "John", IsMan: true },
        { ID: "A003", Name: "Mary", IsMan: false }
    ]);

});

[aj]

I got the answer

Here is jsFiddle:http://jsfiddle.net/64jM3/4/