All Components

MVVM / Remote binding

Select Product

  • ID:

  • Name

  • UnitPrice

View source code:


<div id="form-container">
    <div class="demo-section k-content">
        <h4>Select Product</h4>
        <select data-role="dropdownlist" data-option-label="Select product"
                         data-value-field="ProductID" data-text-field="ProductName"
                         data-bind="source: productsSource, value: selectedProduct" style="width: 100%;"></select>

        <button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Submit All Changes</button>
    </div>
    <div class="demo-section k-content product-info" data-bind="visible: showForm">
        <ul>
            <li><h4>ID: <span data-bind="text:selectedProduct.ProductID, events: { change: change }"></span></h4></li>
            <li><h4>Name</h4> <input type="text" class="k-textbox" id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" style="width: 100%;" /></li>
            <li><h4>UnitPrice</h4> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" style="width: 100%;" /></li>
        </ul>

        <button data-bind="click: remove" class="k-button k-primary">Delete Product</button>

    </div>
</div>
        

View model source code:

var viewModel = kendo.observable({
    productsSource: 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"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
                return options;
            }
        },
        batch: true,
        schema: {
            model: {
                id: "ProductID"
            }
        }
    }),
    selectedProduct: null,
    hasChanges: false,
    save: function() {
        this.productsSource.sync();
        this.set("hasChanges", false);
    },
    remove: function() {
        if (confirm("Are you sure you want to delete this product?")) {
            this.productsSource.remove(this.selectedProduct);
            this.set("selectedProduct", this.productsSource.view()[0]);
            this.change();
        }
    },
    showForm: function() {
       return this.get("selectedProduct") !== null;
    },
    change: function() {
        this.set("hasChanges", true);
    }
});

kendo.bind($("#form-container"), viewModel);

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Remote binding</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div id="form-container"> 
    <div class="demo-section k-content"> 
     <h4>Select Product</h4> 
     <select data-role="dropdownlist" data-option-label="Select product" data-value-field="ProductID" data-text-field="ProductName" data-bind="source: productsSource, value: selectedProduct" style="width: 100%;"></select> 
     <button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Submit All Changes</button> 
    </div> 
    <div class="demo-section k-content product-info" data-bind="visible: showForm"> 
     <ul> 
      <li><h4>ID: <span data-bind="text:selectedProduct.ProductID, events: { change: change }"></span></h4></li> 
      <li><h4>Name</h4> <input type="text" class="k-textbox" id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" style="width: 100%;"></li> 
      <li><h4>UnitPrice</h4> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" style="width: 100%;"></li> 
     </ul> 
     <button data-bind="click: remove" class="k-button k-primary">Delete Product</button> 
    </div> 
   </div> 
   <script>
        var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service";

        $(document).ready(function() {
            var viewModel = kendo.observable({
                productsSource: 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"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                            return options;
                        }
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "ProductID"
                        }
                    }
                }),
                selectedProduct: null,
                hasChanges: false,
                save: function() {
                    this.productsSource.sync();
                    this.set("hasChanges", false);
                },
                remove: function() {
                    if (confirm("Are you sure you want to delete this product?")) {
                        this.productsSource.remove(this.selectedProduct);
                        this.set("selectedProduct", this.productsSource.view()[0]);
                        this.change();
                    }
                },
                showForm: function() {
                   return this.get("selectedProduct") !== null;
                },
                change: function() {
                    this.set("hasChanges", true);
                }
            });

            kendo.bind($("#form-container"), viewModel);
        });
    </script> 
   <div class="box wide"> 
    <h4>View source code:</h4> 
    <pre class="prettyprint">

<div id="form-container">
    <div class="demo-section k-content">
        <h4>Select Product</h4>
        <select data-role="dropdownlist" data-option-label="Select product"
                         data-value-field="ProductID" data-text-field="ProductName"
                         data-bind="source: productsSource, value: selectedProduct" style="width: 100%;"></select>

        <button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Submit All Changes</button>
    </div>
    <div class="demo-section k-content product-info" data-bind="visible: showForm">
        <ul>
            <li><h4>ID: <span data-bind="text:selectedProduct.ProductID, events: { change: change }"></span></h4></li>
            <li><h4>Name</h4> <input type="text" class="k-textbox" id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" style="width: 100%;" /></li>
            <li><h4>UnitPrice</h4> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" style="width: 100%;" /></li>
        </ul>

        <button data-bind="click: remove" class="k-button k-primary">Delete Product</button>

    </div>
</div>
        </pre> 
    <h4 style="padding-top: 2em;">View model source code:</h4> 
    <pre class="prettyprint">
var viewModel = kendo.observable({
    productsSource: 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"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
                return options;
            }
        },
        batch: true,
        schema: {
            model: {
                id: "ProductID"
            }
        }
    }),
    selectedProduct: null,
    hasChanges: false,
    save: function() {
        this.productsSource.sync();
        this.set("hasChanges", false);
    },
    remove: function() {
        if (confirm("Are you sure you want to delete this product?")) {
            this.productsSource.remove(this.selectedProduct);
            this.set("selectedProduct", this.productsSource.view()[0]);
            this.change();
        }
    },
    showForm: function() {
       return this.get("selectedProduct") !== null;
    },
    change: function() {
        this.set("hasChanges", true);
    }
});

kendo.bind($("#form-container"), viewModel);
</pre> 
   </div> 
   <style>
        .demo-section label {
            display: inline-block;
            width: 80px;
            ling-height: 30px;
            height: 30px;
        }

        .demo-section li {
          padding-bottom: 1em;
          list-style: none;
        }
        .product-info {
        	min-height: 160px;
        }
        
        .demo-section .k-button {
          display: block;
          margin: 30px auto 0;
        }
        
        .prettyprint {
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: auto;
            padding: 5px;
        }
    </style> 
  </div>   
 </body>
</html>