All Components
Theme

Themes

    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 source

    API Reference
    • remote-binding.html
    • Sample service
    • Widget configuration

    Support & learning resources