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 name="description" content="Kendo Grid" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/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.1.319/js/kendo.all.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <script>
      var dataSource = new kendo.data.DataSource({
        transport: {
          read: function(options) {
            $.ajax( {
              url: "http://demos.kendoui.com/service/products",
              dataType: "jsonp",
              success: function(result) {
                options.success(result);
              }
            });
            
          },
          update: function(options) {
            alert(1);
            // make JSONP request to http://demos.kendoui.com/service/products/update
            
            $.ajax( {
              url: "http://demos.kendoui.com/service/products/update",
              dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
              // send the updated data items as the "models" service parameter encoded in JSON
              data: {
                models: kendo.stringify(options.data.models)
              },
              success: function(result) {
                // notify the data source that the request succeeded
                
                options.success(result);
              },
              error: function(result) {
                // notify the data source that the request failed
                options.error(result);
              }
            });
          }
        },
        batch: true,
        schema: {
          model: { id: "ProductID" }
        }
      });
      
      dataSource.fetch(function() {
        var product = dataSource.at(0);
        product.set("UnitPrice", product.UnitPrice + 1);        
        dataSource.sync();
      });
    </script>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
korchevpro
0viewers