schema Object

The schema configuration. See the DataSource.schema configuration for all available options.

schema.model Object|kendo.data.Node

The data item (model) configuration. See the DataSource.schema.model configuration for all available options.

The model must inherit from kendo.data.Node.

Example - use a custom model

<script>
var CustomNode = kendo.data.Node.define({
  averageRating: function() {
    var movies = this.children.data();
    var rating = 0;

    if (movies.length) {
      $.each(movies, function() { rating += this.rating; });
      rating /= movies.length;
    }

    return rating.toFixed(2);
  }
});

var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi", items: [
      { movieName: "Inception", rating: 8.8 },
      { movieName: "The Matrix", rating: 8.7 }
    ] },
    { categoryName: "Drama", hasAssignedMovies: true }
  ],
  schema: {
    model: CustomNode
  }
});

datasource.read();

var category = datasource.data()[0];
category.load();
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(category.averageRating()); // logs 8.75
</script>

schema.model.hasChildren Boolean|String|Function (default: false)

Specifies whether the model might have children and might be loaded. Applicable when the rendering of a widget needs to have different states for items that have no children—for example, the Toggle button of the TreeView.

Example - map the hasChildren field to another field

<script>
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi", hasAssignedMovies: false },
    { categoryName: "Drama", hasAssignedMovies: true }
  ],
  schema: {
    model: {
      hasChildren: "hasAssignedMovies"
    }
  }
});

datasource.read();

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(datasource.data()[0].hasChildren); // logs false
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(datasource.data()[1].hasChildren); // logs true
</script>

Example - compute with a function if an item has children

<script>
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi" },
    { categoryName: "Drama" }
  ],
  schema: {
    model: {
      hasChildren: function(item) {
        return item.categoryName != "Drama";
      }
    }
  }
});

datasource.read();

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(datasource.data()[0].hasChildren); // logs true
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(datasource.data()[1].hasChildren); // logs false
</script>

Example - specify that all items may have children

<script>
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi" },
    { categoryName: "Drama" }
  ],
  schema: {
    model: {
      hasChildren: true
    }
  }
});

datasource.read();

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(datasource.data()[0].hasChildren); // logs true
</script>

schema.model.children String|Object (default: "items")

The DataSource object or configuration for fetching the child nodes. Detailed explanation of how children are fetched is available in the HierarchicalDataSource overview help topic.

You cannot use "children" as a field name—the model has already a children property (the child data source).

For static HierarchicalDataSource (local data), this field may be a String and will indicate which field holds the nested data.

Example - specify a children field

<script>
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    {
      categoryName: "SciFi",
      movies: [
        { title: "Star Wars: A New Hope", year: 1977 },
        { title: "Star Wars: The Empire Strikes Back", year: 1980 },
        { title: "Star Wars: Return of the Jedi", year: 1983 }
      ]
    },
    {
      categoryName: "Drama",
      movies: [
        { title: "The Shawshenk Redemption", year: 1994 },
        { title: "Fight Club", year: 1999 },
        { title: "The Usual Suspects", year: 1995 }
      ]
    }
  ],
  schema: {
    model: {
      children: "movies"
    }
  }
});

datasource.read();

var scifi = datasource.data()[0];
scifi.load();
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(scifi.children.data().length); // logs 3
</script>

Example

<script>
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    {
      categoryName: "SciFi",
      movies: [
        { title: "Star Wars: A New Hope", year: 1977, cast: [
            { actor: "Mark Hamill", character: "Luke Skywalker" },
            { actor: "Harrison Ford", character: "Han Solo" },
            { actor: "Carrie Fisher", character: "Princess Leia Organa" }
        ] },
        { title: "Star Wars: The Empire Strikes Back", year: 1980, cast: [
            { actor: "Mark Hamill", character: "Luke Skywalker" },
            { actor: "Harrison Ford", character: "Han Solo" },
            { actor: "Carrie Fisher", character: "Princess Leia Organa" },
            { actor: "Billy Dee Williams", character: "Lando Calrissian" }
        ] }
      ]
    }
  ],
  schema: {
    model: {
      children: { // define options for second level
        schema: {
          data: "movies",
          model: {
            children: "cast" // third level is defined by the field "cast"
          }
        }
      }
    }
  }
});

datasource.read();

var scifi = datasource.data()[0];
scifi.load();
var sw5 = scifi.children.data()[1];
sw5.load();
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(sw5.children.data().length); // logs 4
</script>