Remote binding

Select Product:

ID
Name
UnitPrice

View source code:

<div id="form-container">
    <div class="selector">
        Select Product: <select data-role="dropdownlist" data-value-field="ProductID" data-text-field="ProductName"
                         data-bind="source: productsSource, value: selectedProduct"></select>

        <button data-bind="click: save, enabled: hasChanges">Publish All Changes</button>
    </div>
    <div class="form" data-bind="visible: showForm">
        <ul>
            <li><label>ID</label> <span data-bind="text:selectedProduct.ProductID, events: { change: change }"></span></li>
            <li><label>Name</label> <input type="text" class="k-textbox" id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" /></li>
            <li><label>UnitPrice</label> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" /></li>
        </ul>

        <button data-bind="click: remove">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);