View source code:

<div id="form-container">
    <div class="demo-section k-header">
        <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-header 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);