<button id="edit">Edit First Row</button>
  <div id="treelist"></div>

  <script>
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/EmployeeDirectory/All"
          },
          update: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
            type: "POST",
            contentType: "application/json"
          },
          create: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
            type: "POST",
            contentType: "application/json"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return 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"]}
      ]
    });
    $("#edit").click(function(){
      $("#treelist").data("kendoTreeList").editRow($("#treelist tbody>tr:eq(0)"));
    });
  </script>