Back
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);