cancelRow

Cancels editing for the table row which is in edit mode. Reverts any changes made.

Example - canceling editing

  <button id="cancel">Cancel Editing</button>
  <div id="treelist"></div>

  <script>
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/EmployeeDirectory/All",
            dataType: "jsonp"
          },
          update: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
            dataType: "jsonp"
          },
          create: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
            }
          }
        },
        batch: true,
        schema: {
          model: {
            id: "EmployeeId",
            parentId: "ReportsTo",
            fields: {
              EmployeeId: { type: "number", editable: false, nullable: false },
              ReportsTo: { nullable: true, type: "number" },
              FirstName: { validation: { required: true } },
              LastName: { validation: { required: true } },
              Position: { type: "string" }
            },
            expanded: true
          }
        }
      },
      height: 300,
      editable: true,
      columns: [
        { field: "FirstName", expandable: true, title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 100 },
        { field: "Position" },
        { command: ["edit"]}
      ]
    });
    $("#cancel").click(function(){
      $("#treelist").data("kendoTreeList").cancelRow();
    });
  </script>