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