Kendo UI Template

<!DOCTYPE html>
<html>

  <head>
    <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" />
    <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" />
    <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" />
    <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" />
    <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" />
    <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" />
    <link data-require="kendo-bootstrap-css@*" data-semver="2013.2.716" rel="stylesheet" href="//cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" />
    <link data-require="kendo-bootstrap-css@*" data-semver="2013.2.716" rel="stylesheet" href="//cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" />
    <script data-require="jquery@1.9.x" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="kendo" data-semver="2013.3.716" src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.2" src="http://code.angularjs.org/1.2.2/angular.js"></script>
    <script data-require="kendo-js@*" data-semver="2013.2.716" src="//cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
    <script data-require="angular-kendo@0.5.1" data-semver="0.5.1" src="http://kendo-labs.github.io/angular-kendo/build/angular-kendo.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="script.js"></script>
    <meta charset="utf-8" />
    <title>KendoUI Template</title>
  </head>

  <body ng-app="app" ng-controller="myCtrl">
     <div kendo-grid k-options="gridOptions"></div>
     <div ng-show="form.selectedCountries">Selected countries: {{form.selectedCountries}}</div>
  </body>

</html>

// Code goes here

var app = angular.module('app', ['kendo.directives']); 

app.controller("myCtrl",['$scope','$http','$timeout', function ($scope,$http) {
  
  $scope.countries = new kendo.data.DataSource();
  
  $scope.form = {
    selectedCountries: ['DE']
  }
  
  $http.get('Country.json').success(function (data) {
    $scope.countries.data(data);
  });  
  
  $scope.countryFilter = function(element) {
      var widget = element.kendoMultiSelect({
          dataSource: $scope.countries,
          optionLabel: "--Select Value--",
          dataTextField: "name",
          dataValueField: "code",
          autoBind: false,
      }).data("kendoMultiSelect");
      
      // manually propagate the selection to the scope.
      widget.bind("change", function(){
        $scope.form.selectedCountries = this.value();
        $scope.$digest();
      });
  };
  
  $scope.gridOptions = {
        columns: [
                 { "field": "Country", "title": "Country", filterable: { ui: $scope.countryFilter }},
                 { "field": "Active", "title": "Active Dropped", filterable: false }],
        sortable: true,
        pageable: { "refresh": true, "pageSizes": true },
        filterable: {
            extra: false,
            operators: {
                string: {
                    eq: "Is equal to"
                }
            }
        },
        pageSizes: true,
        selectable: 'row'
    };
}]);

/* Styles go here */

[{ "code": "FR", "name": "France" }, { "code": "DE", "name": "Germany" },{ "code": "BE", "name": "Belgium" }]