animation Boolean|Object

A collection of visual animations used when items are expanded or collapsed through user interaction. Setting this option to false will disable all animations.

animation:true is not a valid configuration.

Example - disable animation of subnodes

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: false,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

animation.collapse Boolean|Object

The animation that will be used when collapsing items.

Example - disable the collapse animation

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: {
    collapse: false
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

animation.collapse.duration Number (default: 200)

The number of milliseconds used for the animation when a node is expanded.

Example - specify a collapse animation duration

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: {
    collapse: {
      duration: 400
    }
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

animation.collapse.effects String

A whitespace-delimited string of animation effects that are used when collapsing nodes. The supported effects are fadeOut and collapseVertical.

Example - make sub-levels fade out and collapse vertically

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: {
    collapse: {
      effects: "fadeOut collapseVertical"
    }
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

animation.expand Boolean|Object

The animation that will be used when expanding items.

Example - disable expand animation

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: {
    expand: false
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

animation.expand.duration Number (default: 200)

The number of milliseconds used for the animation when a node is expanded.

Example - specify a slow expand animation

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: {
    expand: {
      duration: 600
    }
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

animation.expand.effects String (default: "expandVertical")

A whitespace-delimited string of animation effects that are used when expanding nodes. The supported effects are "expandVertical" and "fadeIn".

Example - make sub-levels fade in and expand vertically

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: {
    expand: {
      effects: "fadeIn expandVertical"
    }
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>