Kendo UI R3'17 Release Webinar is near! Sign up to watch technical demos of the freshly released bits, including support for React and Vue.
All Components
Change Theme

SASS Themes (beta)

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      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