New to Kendo UI for jQuery? Download free 30-day trial

Use MVVM Binding for Data Editing in the Window

Environment

Product Progress Kendo UI Window for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I edit data in a Kendo UI for jQuery Window by using an MVVM binding?

Solution

The example below demonstrates how to achieve the desired scenario.


    <ul id="data-container"></ul>

    <!-- template used to render the dataSource's data -->
    <script id="tmp" type="text/x-kendo-template">
        <li data-uid="#: uid #"> ID: #: ProductID # Product Name: #: ProductName # <input data-role="button" type="button" value="edit" class="edit-button k-button k-button-sm k-rounded-md k-button-solid k-button-solid-base" /></li>
    </script>

    <!-- kendoWindow -->
    <div id="editForm">
      <h2>Edit Form</h2>
      <ul>
        <li>
          <label for="ProductName">ProductName</label>
          <!-- bind the ProductName field of the selected product -->
          <input type="text" data-role='textbox' name="ProductName" data-bind="value: selected.ProductName" required />
        </li>
        <li>
          <label for="UnitPrice">UnitPrice</label>
          <!-- bind the UnitPrice field of the selected product -->
          <input data-role="numerictextbox" name="UnitPrice" data-bind="value: selected.UnitPrice" required min="1" />
          <span class="k-invalid-msg" data-for="UnitPrice"></span>
        </li>
        <li>
          <label for="UnitsInStock">UnitsInStock</label>
          <!-- bind the UnitsInStock field of the selected product -->
          <input data-role="numerictextbox" name="UnitsInStock" data-bind="value: selected.UnitsInStock" required min="0" />
          <span class="k-invalid-msg" data-for="UnitsInStock"></span>
        </li>
        <li>
          <label for="Discontinued"></label>
          <!-- bind the Discontinued field of the selected product -->
          <input type="checkbox" name="Discontinued" data-bind="checked: selected.Discontinued" />
          <span>Items is discontinued</span>
        </li>
        <li class="buttons">
          <!-- attach the click event handlers -->
          <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base btnSave" data-bind="events: { click: sync }">Save</button>
          <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base btnCancel" data-bind="events: { click: cancel }">Cancel</button>
        </li>
      </ul>
    </div>
    <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
      var validator;
      var viewModel = kendo.observable({
        //create a dataSource
        dataSource: 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"
            },
            create: {
              url: crudServiceBaseUrl + "/Products/Create",
              dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
              }
            }
          },
          batch: true,
          pageSize: 20,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
              }
            }
          },
          change: function () {
            var template = kendo.template($("#tmp").html()); //create a template
            $("#data-container").html(kendo.render(template, this.view())); //render the template with current data
          }
        }),
        selected: {}, //this field will contain the edited dataItem
        sync: function () {
          if(validator.validate()) { //validate the user input
            this.dataSource.sync(); //sync the changes through the transport
            $("#editForm").data("kendoWindow").close();
          }
        },
        cancel: function () {
          this.dataSource.cancelChanges(); //calcel all the change
          validator.hideMessages(); //hide the warning messages
          $("#editForm").data("kendoWindow").close();
        }
      });

      viewModel.dataSource.read(); //invoke the read transport of the DataSource

      kendo.bind($("#editForm"), viewModel);
      validator = $("#editForm").kendoValidator().data("kendoValidator"); //create a validator instance

      $("#editForm").kendoWindow({ //create a window
        visible: false
      });

      $("#data-container").on("click", ".edit-button", function(e) {
        var model = viewModel.dataSource.getByUid($(e.target).closest("li").data("uid")); //get reference to the model
        validator.hideMessages(); //hide the validation messages (if any)
        viewModel.set("selected", model); //update the viewModel
        $("#editForm").data("kendoWindow").open().center();
      });

    </script>

    <style scoped>
      #grid {
        width: 700px;
        float: left;
      }
      #editForm {
        width: 600px;
        margin: 20px;
        padding: 20px;
        float: left;
        border: 1px solid #c5c5c5;
        border-radius: 10px;
        font-size: 80%;
      }
      #editForm h2 {
        border-bottom: 1px solid #ccc;
        font-size: 1.4em;
        font-weight: normal;
        padding: 0;
        margin: 0;
      }
      #editForm ul {
        list-style-type: none;
      }
      #editForm ul li {
        margin: 10px;
      }
      #editForm ul label {
        font-weight: bold;
        display: inline-block;
        width: 90px;
        text-align: right;
      }
      #editForm label {
        display: block;
        margin-bottom: 10px;
      }
      #editForm .buttons {
        margin-top: 25px;
      }
      #editForm .k-button {
        width: 100px;
      }
    </style>

See Also

In this article