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>
<script src="//code.jquery.com/jquery.min.js"></script>
  
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
  
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    
  
​
​
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//da7xgjtj801h2.cloudfront.net/2014.2.716/js/kendo.all.min.js"></script>
  
  
  <link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
  
  
  
  
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
  
  
          <div id="container">
            
          <div id="grid" ></div>               
​
            
​
        </div>
  
  
</body>
</html>
 
$("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        CustomerID: { type: "string" },
                        ShippedDate: { type: "date" },
                        OrderDate: { type: "date" },
                        RequiredDate: { type: "date" },
                        ShipName: { type: "string" },
                        ShipAddress: { type: "string" },
                        ShipRegion: { type: "string" },
                        ShipPostalCode: { type: "string" },
                        ShipCountry: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        //height: 430,
        sortable: true,
        filterable: true,
        resizable:true,
        columnMenu: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "CustomField",
​
                template: '<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"> <i class="icon-th"></i> <span class="caret"></span></button><ul class="dropdown-menu"> <li><i class="icon-trash"></i> <span> Action 1</span></li> <li><i class="icon-list-alt"></i> <span> Action 2</span></li> <li><i class="icon-random" style="margin-right:3px"></i><span >Action 3</span></li> </ul>',
                width: 100
            }, {
                field: "OrderID",
                format: "{0}",
                title: "Order ID",
                width: 100
            }, {
                field: "CustomerID"                
            }, {
                field: "ShippedDate",
                format: "{0:d}",
                filterable: true
            }, {
                field: "OrderDate",
                format: "{0:d}",
                filterable: true
            }, {
                field: "RequiredDate",
                format: "{0:d}",
                filterable: true
            }, {
                field: "ShipCountry",
                title: "Ship Country",
                width: 130
            }, {
                field: "ShipName",
                title: "Ship Name",
                width: 200
            }
        ]
    });
Output

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

Dismiss x
public
Bin info
Vlandpro
0viewers