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

LoadOnDemand

configuration

Indicates whether the child DataSources should be fetched lazily when parent groups get expanded. Setting this to true causes loading the child DataSources when expanding the parent node.

loadOnDemand

Boolean|Object

Default: false

<input id="dropdowntree">
<script>
    $("#dropdowntree").kendoDropDownTree({
        loadOnDemand: true,
        dataSource: [
            {
                text: "foo", items: [
                    { text: "bar" }
                ]
            }
        ]
    });
</script>

The component calls the valueMapper function when the component receives a value, that is not fetched from the remote server yet. The component will pass the selected value(s) in the valueMapper function. In turn, the valueMapper implementation should return the respective data item(s) ids.

The valueMapper needs dataSource.schema to work properly.

<input id="dropdowntree">
<script>
  $("#dropdowntree").kendoDropDownTree({
    dataTextField: "FullName",
    dataValueField: "EmployeeId",
    loadOnDemand: {
      valueMapper: function (options) {
        options.success([[2, 8]]);
      }
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/Employees"
        }
      },
      schema: {
        model: {
          id: "EmployeeId",
          hasChildren: "HasEmployees"
        }
      }
    },
    value: '8'
  });
</script>

LoadOnDemand

loadOnDemand

loadOnDemand.valueMapper