background

Kendo UI for jQuery

jQuery TreeList

  • Combine the best-in-class jQuery Data Grid (Table) and TreeView to display and intact with hierarchical data.
  • Part of the Kendo UI for jQuery library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
TreeList
  • Overview

    Display self-referencing data in a user-friendly manner with the Kendo UI for jQuery TreeList component. It combines the features of the TreeView component (hierarchy, expand/collapse, load on demand) and the Data Grid (columns, data editing, sorting, filtering, aggregates).

    See the jQuery TreeList demo

    overview-jquery-treelist
  • Data Binding

    Use the included DataSource component to bind the TreeList control to static arrays, dynamic objects, local or remote data, or even SignalR hubs.

    See the jQuery TreeList Data Binding demo

  • Paging

    The jQuery TreeList component allows client-side pagination. You can enable paging by configuring the Pageable settings and predefine the displayed items per page, however users can still alter this for their convenience.  

    See the jQuery TreeList Paging demo

    treelist-paging
  • Drag and Drop

    Allow users to drag and drop tree list items by setting a property. They can rearrange the order of the rows across all hierarchy levels of the jQUery TreeList, as the component would internally update the parentId field when such change is registered. 

    See the jQuery TreeList Drag and Drop demo

    treelist-drag-drop
  • CRUD operations

    The jQuery TreeList component supports CRUD operations, enabling your users to edit, insert, and delete via a visual UI and apply the changes on a data source level. Supported editing modes: inline or in a popup.

    See the jQuery TreeList demo

    treelist-batch-editing
  • Filter Row

    Give your users a great way to filter the items in their lists to get the data view they need by displaying a filter row as the first row at the top of the list. Once you set a simple property to show the filter row, the jQuery TreeList component will add a filter for the appropriate date type at the top of each column.

    See the jQuery TreeList Filter Row demo

    treelist-filter-row
  • Search Panel

    Sometimes the data in the jQuery TreeList component can be large and users would need an easy way to locate what they are looking for. The Search Panel feature allows easy location of specific records within the TreeList. Typing what you are looking for filters the and displays the desired information along with the related items in the hierarchy. 

    See the jQuery TreeList Search Panel demo

    treelist-search
  • Row Template

    The jQuery TreeList offers flexible customization for styling row appearance through templates. Add images, icons and other elements for full control and a customized data look. The TreeList includes RowTemplate and AltRowTemplate, allowing you toyou can render different content for the tree list alternating rows. 

    See the jQuery TreeList Row Template demo

    treelist-row-template
  • Column Menu

    The jQuery TreeList includes a built-in option to display a menu with column operations, including:

    • Sort data
    • Hide/show columns
    • Resize and reorder columns
    • Apply multiple filters to one or many columns

     

    See the jQuery TreeList Column Menu demo

    treelist-column-menu
  • Multicolumn Headers

    The jQuery TreeList allows you to stack several column headers under a common parent header to visually group relevant fields. The common header in turn can be a child of another upper MultiColumn header that can also span both columns and other headers. For example, you can set a top-level common header named “Personal Info,” under which you can define columns for LastName, Phone and another common header named “Location” which groups multiple related columns, such as Country, City, etc. 

    See the jQuery TreeList Multi-Column Headers demo

    treelist-multi-column-headers
  • Aggregates

    The Kendo UI for jQuery TreeList lets you display aggregate values in the column footers, such as min, max, average, sum, count, etc.

    See the jQuery TreeList Aggregates demo

    treelist-aggregates
  • Frozen Columns

    Keep important information on the screen by freezing specified columns and allowing the rest to horizontally scroll when your data view is larger than the container.

    See the jQuery TreeList Frozen Columns demo

  • Persist State

    You can easily save the user’s preferences and settings when they interact with the component and restore them when they log back in. This is easily achieved through two methods, getOptions and setOptions.

    See the jQuery TreeList Persist State demo

  • Export to Excel or PDF

    Turn on the jQuery TreeList’s built-in PDF and Excel export features with a single line of code. he output is fully customizable.

    See the jQuery TreeList Export to Excel and PDF demos

    treelist-export

All Kendo UI for jQuery Components

Next Steps

Next Steps