Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  
  
  
  
  
  
  
  
</head>
<body>
  <div id="grid"></diV>
</body>
</html>
 
        $(document).ready(function () {
            var gridData = [
                  { ItemId: "1001", Qty: 2, price: 200 }
                , { ItemId: "1002", Qty: 1, price: 100 }
                , { ItemId: "1003", Qty: 1, price: 150 }
                         ];
            $("#grid").kendoGrid({
                dataSource: gridData
                , selectable: "row",
              dataBound:function(){
              grid = this;
                grid.tbody.find('tr').each(function(){            
                 var item = grid.dataItem(this);
                 kendo.bind(this,item);
             })
              }
                , columns: [
                      { field: "ItemId" }
                    , { field: "Qty" }
                    , { field: "price" }
                  , { title: "Quantity", width: "200", template: '<input data-role="numerictextbox" data-bind="value:Qty" data-max-value="100"/>' }                  , {
                         title: "Total"
                        , template: "#=Qty*price#"
                    }
                ]
            });
        });
    
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers