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>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/products.js"></script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body> 
  <div id="grid"></div>
  
  
  <script id="popup-editor" type="text/x-kendo-template">
<div class="nested-tabstrip">
    <ul>
        <li class="k-state-active">
            Textboxes
        </li>
        <li>
            Grid
        </li> 
    </ul>
    
    <div>
          Some controls
    </div>
    <div>
        <div class="tabstrip-grid"></div> 
    </div> 
    
    
</div>
  </script>
  
  
  <script>
    $(document).ready(function () {
      var crudServiceBaseUrl = "http://demos.kendoui.com/service",
          dataSource = new kendo.data.DataSource({
            transport: {
              read:  {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
              },
              update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
              },
              destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
              },
              create: {
                url: crudServiceBaseUrl + "/Products/Create",
                dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {models: kendo.stringify(options.models)};
                }
              }
            },
            batch: true,
            pageSize: 20,
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { editable: false, nullable: true },
                  ProductName: { validation: { required: true } },
                  UnitPrice: { type: "number", validation: { required: true, min: 1} },
                  Discontinued: { type: "boolean" },
                  UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                }
              }
            }
          });
      
      $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 430,
        toolbar: ["create"],
        columns: [
          { field:"ProductName", title: "Product Name" },
          { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "100px"},
          { field: "UnitsInStock", title:"Units In Stock", width: "100px"},
          { field: "Discontinued", width: "100px"},
          { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }],
        editable: {mode: "popup", template: kendo.template($("#popup-editor").html())},
        edit: function(e){
          e.container.find(".nested-tabstrip").kendoTabStrip({});
          
           e.container.find(".tabstrip-grid").kendoGrid({
              dataSource: {
                type: "odata",
                transport: {
                  read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                },
                schema: {
                  model: {
                    fields: {
                      OrderID: { type: "number" },
                      Freight: { type: "number" },
                      ShipName: { type: "string" },
                      OrderDate: { type: "date" },
                      ShipCity: { type: "string" }
                    }
                  }
                },
                pageSize: 10,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
              }, 
              filterable: true,
              sortable: true,
              pageable: true,
              columns: [{
                field:"OrderID",
                filterable: false
              },
                        "Freight",
                        {
                          field: "OrderDate",
                          title: "Order Date",
                          width: 120,
                          format: "{0:MM/dd/yyyy}"
                        }, {
                          field: "ShipName",
                          title: "Ship Name",
                          width: 260
                        }, {
                          field: "ShipCity",
                          title: "Ship City",
                          width: 150
                        }
                       ]
            }); 
        }
      });
    });
  </script> 
​
​
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
apoffpro
0viewers