How to get field value when edit data in Kendo Ui treelist

Question

I'm new in Kendo UI,and i have a question. Now i'm use TreeList / Editing and how to auto load value to other field when i edit value to first field ?

example:
1.serial number: 123456789
2.name : test

when i edit serial number 123456789 to first field and auto load name to second field.

Answer 1

To set the value of column B based on change made to a column A, you need to edit the model bound to the tree list. For this do the following:-

1. Handle edit event of the tree list. On this save the model to a local variable.
2. Add an editor template to column A. On the select event set the value of model.

Below is a working code snippet:-

<div id="treelist"></div>
    <script>

    $(document).ready(function () {
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
      var model= null;
      var employeesData=[{"EmployeeId":101,"FirstName":"Daryl","LastName":"Sweeney"},
      {"EmployeeId":202,"FirstName":"Guy","LastName":"Wooten"},
      {"EmployeeId":303,"FirstName":"Priscilla","LastName":"Frank"},
      {"EmployeeId":404,"FirstName":"Ursula","LastName":"Holmes"},
      {"EmployeeId":505,"FirstName":"Anika","LastName":"Vega"}];

      var dataSource = new kendo.data.TreeListDataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory/All",
                        dataType: "jsonp"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
                        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", nullable: false },
                            ReportsTo: { nullable: true, type: "number" },
                            FirstName: { validation: { required: true } },
                            HireDate: { type: "date" },
                            Phone: { type: "string" },
                            HireDate: { type: "date" },
                            BirthDate: { type: "date" },
                            Extension: { type: "number", validation: { min: 0} },
                            Position: { type: "string" }
                        },
                        expanded: true
                    }
                }
        });

        $("#treelist").kendoTreeList({
            dataSource: dataSource,
            toolbar: [ "create", "save", "cancel" ],
            editable: "incell",
            height: 540,
            dataBound: function (e) {
                var items = e.sender.items();
                for (var i = 0; i < items.length; i++) {
                    var dataItem = e.sender.dataItem(items[i]);
                    var row = $(items[i]);
                    if (dataItem.isNew()) {
                        row.find("[data-command='createchild']").hide();
                    }
                    else {
                        row.find("[data-command='createchild']").show();
                    }
                }
            },
            edit: function(e) {
                model = e.model;
            }, 
            columns: [{ 
                field: "EmployeeId",
                expandable: true, 
                title: "Serial Number", 
                width: 180,
                editor: function(container, options) {
                      // create an input element
                      var input = $("<input/>");
                      // set its name to the field to which the column is bound ('lastName' in this case)
                      input.attr("name", options.field);
                      // append it to the container
                      input.appendTo(container);
                      // initialize a Kendo UI AutoComplete
                      input.kendoAutoComplete({
                        dataTextField: "EmployeeId",
                        dataSource: employeesData,
                        select: function(e) {
                          if(model !=null){
                                         model.FirstName = e.dataItem.FirstName;
                                model.LastName = e.dataItem.LastName;
                          }
                        }
                      });
                    }
                },
                { field: "FirstName", title: "First Name", width: 100 },
                { field: "LastName", title: "Last Name", width: 100 },
                { field: "Position", width: 100 },
                { field: "Phone", title: "Phone", width: 100 },
                { field: "Extension", title: "Ext", format: "{0:#}", width: 100 },
                { command: [{name: "createchild", text: "Add child"},"destroy" ], width: 240 }]
            });
    });
    </script>

Answer 2

You can trigger your function when the row is being saved or when the edit field is being changed. Take a look at the list of events here and choose when exactly you want to make the changes. https://demos.telerik.com/kendo-ui/treelist/events

here is a example how to all a function when saving the changes: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/methods/saverow

I´m not sure witch edit method you are using (inline, inCell or Popup edit mode) each method can use events like saveRow, beforeEdit...

Check all the events documentation here: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events