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</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/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div>
            <button>Load Data</button>
            <div id="grid">
            </div>
​
        </div>
    </div>
    <script>
        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
            });
        }
        var st, ed;
        $("#grid").kendoGrid({
            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");
            }
        });
        $("button").click(function () {
            st = new Date();
            $("#grid").data("kendoGrid").dataSource.data(data);
        });
    </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
darkthreadpro
0viewers