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

Expand

methods

Expands the row.

expand

Parameters:rowString|Element|jQuery

A string, a DOM element, or a jQuery object which represents the table row. A string is treated as a jQuery selector.

Returns:Promise

- a promise that will be resolved once the data is loaded.

<button id="expand">Expand TreeList</button>
<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22 },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ]
  });
  $("#expand").click(function(){
    var treeList = $("#treeList").data("kendoTreeList");
    treeList.expand($("#treeList tbody>tr:eq(0)"));
  });
</script>

<button id="expand">Expand item with ID = 1</button>
<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22 },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ]
  });
  $("#expand").click(function(){
    var treeList = $("#treeList").data("kendoTreeList");

    // find item with id = 1 in datasource
    var dataItem = treeList.dataSource.get(1);

    // find row for data item
    var row = treeList.element.find("tr[data-uid=" + dataItem.uid + "]")

    treeList.expand(row);
  });
</script>