Don Wibier's Blog

DevExtreme TreeList - Paging and State Persisting (v18.1)

We've included some really cool features in the DevExtreme TreeList widget in our upcoming v18.1 release.


If you're dealing with a lot of data in the TreeList, you might not want to scroll all the way down (or up).
For this reason, we decided to implement a pager in the TreeList similar to the one found in the DataGrid widget. Not only does it allow you to page through the nodes, but it also allows you to select the page size and it shows you the number of nodes and pages.

You can configure the use of the pager by specifying the paging and pager configuration options as shown below:

    scrolling: {
        mode: "standard"
    paging: {
        enabled: true,
        pageSize: 10
    pager: {
        showPageSizeSelector: true,
        allowedPageSizes: [5, 10, 20],
        showInfo: true

The TreeList widget has the same API as the DataGrid widget.

If you have questions or suggestions, feel free to take part in the discussion about this feature at GitHub.

Note: Due to the difficulty of remote hierarchical data paging, this feature is only available on the client-side.

State Persisting

Suppose you have made some run-time customizations in the TreeList widget like filter-settings, column visibility or even expanded/collapsed/selected nodes.

You can now re-apply these settings in a later stage of the application with our v18.1 version of the TreeList widget.
Below is a code fragment on how to persist this information in the browser's localStorage:

    stateStoring: {
        enabled: true,
        type: 'localStorage',
        storageKey: 'treeListStorage'

Angular, Vue, React, ASP.NET MVC / Core and more

All of these new features will be available on all the frameworks we support like Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.

Try it now?

If you want to give these features a test-drive, simply add it to your project by entering:

npm install --save devextreme@18.1-unstable

If you're not using npm, check out this post.

Like it?

Let me know by replying to this post.

Published Apr 13 2018, 02:43 AM by
Filed under: , , , ,
Bookmark and Share


No Comments

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at or call us at +1 (818) 844-3383


DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners