Implement the Kendo Grid with MVVM Pattern

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div data-role="grid"
             data-editable="true"
             data-columns="[
                                { 'field':'id','title':'Id', 'width': 270  },
                                 { 'field':'name', 'width': 270 , 'title':'Fruits Name'},

                              ]"
             data-bind="source: fruits,
                            visible: isVisible"

             style="height: 200px"></div>
    </div>
    <script>
    var viewModel = kendo.observable({
        isVisible: true,

   fruits: new kendo.data.DataSource({
          data: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" },
            { id: 3, name: "Bananas" }
          ],
          schema: {
            model: {
              fields: {
                id: { type: "number" },
                name: { type: "string" }
              }
            }
          }
        })
       });
    kendo.bind($("#example"), viewModel);
    </script>
</body>
</html>