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.

Paging

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.