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" />
  
  
  <script src="https://dl.dropboxusercontent.com/u/3997430/upload/codex/bootstrap-contextmenu.js"></script>
  
  
  
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
    <body>
        <div id="container" >
            <div id="grid"></div>
        </div>
        
        
​
        <div id="context-menu">
            <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>
        </div>
​
​
</body>
</html>
 
//button template
var btnMenu = $('<span /><button class="btn btn-mini" data-toggle="context" data-target="#context-menu"> <i class="icon-th"></i> <span class="caret"></span></button>');
​
//bind left click
btnMenu.click(function (e) {
    e.stopPropagation();
​
    //clicked button
    var obj = $(this);
    
    //get dataItem
    var uid = obj.closest("tr").attr("data-uid");
    var dataItem = $("#grid").data("kendoGrid").dataSource.getByUid(uid);
    $("#context-menu").find("span:first").text("OrderID: " + dataItem.OrderID);
    
    obj.contextmenu('show', e);
});
​
//add buttons
function onDatabound(e) {
    btnMenu.appendTo('tbody > tr > td:first-child');
}
​
​
$("#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
        },
        dataBound: onDatabound,
        sortable: true,
        filterable: true,
        resizable:true,
        columnMenu: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "CustomField",
                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
anonymouspro
0viewers