R2 2018 Release is here – now with modern UI for chatbots and more! See what’s new!
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