Update a Field in All TreeList Child Nodes

Environment

Product	Progress® Kendo UI® TreeList for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I update a field in all child nodes in the Kendo UI for jQuery TreeList?

Solution

The following example demonstrates how to update all child nodes recursively and propagate the row state in the TreeList.

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

  <script>
    var dataSource = new kendo.data.TreeListDataSource({
      data: [
        { id:  1, Name: "Daryl Sweeney", Position: "CEO", Phone: "[phone]", parentId: null },
        { id:  2, Name: "Guy Wooten", Position: "Chief Technical Officer", Phone: "[phone]", parentId: null },
        { id:  3, Name: "Priscilla Frank", Position: "Chief Product Officer", Phone: "[phone]", parentId: 1 },
        { id:  4, Name: "Ursula Holmes", Position: "EVP, Product Strategy", Phone: "[phone]", parentId: 3 },
        { id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Phone: "[phone]", parentId: 32 },
        { id: 24, Name: "Melvin Carrillo", Position: "Director, Developer Relations", Phone: "[phone]", parentId: 3 },
        { id: 29, Name: "Martha Chavez", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
        { id: 30, Name: "Oren Fox", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
        { id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Phone: "[phone]", parentId: 2 },
        { id: 41, Name: "Amos Barr", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
        { id: 42, Name: "Gage Daniels", Position: "Software Architect", Phone: "[phone]", parentId: 32 },
        { id: 43, Name: "Constance Vazquez", Position: "Director, Engineering", Phone: "[phone]", parentId: 32 },
        { id: 46, Name: "Darrel Solis", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
        { id: 47, Name: "Brian Yang", Position: "Senior Software Developer", Phone: "[phone]", parentId: 46 },
        { id: 50, Name: "Lillian Bradshaw", Position: "Software Developer", Phone: "[phone]", parentId: 46 },
        { id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Phone: "[phone]", parentId: 11 },
        { id: 78, Name: "Rinah Simon", Position: "Software Developer", Phone: "[phone]", parentId: 11 }
      ],
      change: function propagate(e) {
        var node = e.items && e.items[0];
        var propagatedField = "checked";

        // Only propagate changes to the desired field.
        if (!node || e.field != propagatedField) {
          return;
        }

        this.unbind("change", propagate);

        function update(dataSource, nodes, field, state) {
          for (var i = 0; i < nodes.length; i++) {
            nodes[i].set(field, state);

            update(dataSource, dataSource.childNodes(nodes[i]), field, state);
          }
        }

        update(this, this.childNodes(node), propagatedField, node[propagatedField]);

        this.bind("change", propagate);
      }
    });

    $("#treelist").kendoTreeList({
      dataSource: dataSource,
      height: 540,
      columns: [
        { template: "<input type='checkbox' class='k-checkbox k-checkbox-md k-rounded-md' data-bind='checked: checked' />", width: 40 },
        { field: "Position", expandable: true },
        { field: "Name" },
        { field: "Phone" }
      ],
      dataBound: function() {
        var view = this.dataSource.view();
        this.items().each(function(index, row) {
          kendo.bind(row, view[index]);
        });
      }
    });
  </script>

See Also

• Basic Usage of the TreeList (Demo)
• Using the API of the TreeList (Demo)
• TreeList JavaScript API Reference