jube-fork/Jube.App/wwwroot/kendo/examples/mvvm/remote-binding.html

<!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.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.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 = "https://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">

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

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

        &lt;button data-bind=&quot;click: remove&quot; class=&quot;k-button k-primary&quot;&gt;Delete Product&lt;/button&gt;

    &lt;/div&gt;
&lt;/div&gt;
        </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>