Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KendoGrid + NG</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.flat.min.css" />
    <script src="https://kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" ng-app="KendoDemos">
        <div ng-controller="MyCtrl">
            <button ng-click="loadData()">Load Data</button>
            <div kendo-grid="grid" options="mainGridOptions">
            </div>
​
        </div>
    </div>
    <script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            var data = [];
            for (var i = 0; i < 2000; i++) {
              data.push({
                FirstName: "FN" + i,
                LastName: "LN" + i,
                Country: "CN" + i,
                City: "CT" + i,
                Title: "T" + i
              });
            }
            $scope.loadData = function () {
                st = new Date();
                $scope.grid.dataSource.data(data);
            };
            var st;
            $scope.mainGridOptions = {
                dataSource: [],
                height: 600,
                sortable: true,
                pageable: false,
                columns: [
                    { field: "FirstName", title: "First Name", width: "120px" },
                    { field: "LastName", title: "Last Name", width: "120px" },
                    { field: "Country", width: "120px" },
                    { field: "City", width: "120px" },
                    { field: "Title" }
                ],
                dataBound: function () {
                    st && alert(new Date() - st + "ms");
                }
            };
        })
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers