-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Tree List - Paging
The TreeList splits records into multiple pages. This technique helps optimize control performance: the client only needs to load and render one page at a time. Users can use a scroll bar or a pager to navigate between pages. This demo shows how to enable and customize the pager.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
@(Html.DevExtreme().TreeList<DevExtreme.MVC.Demos.Models.TreeList.EmployeeTask>()
.ID("tasks")
.DataSource(ds => ds.WebApi()
.RouteName("TreeListTasks")
.LoadAction("Tasks")
.Key("Task_ID")
)
.KeyExpr("Task_ID")
.ParentIdExpr("Task_Parent_ID")
.AutoExpandAll(true)
.ColumnAutoWidth(true)
.ShowBorders(true)
.Scrolling(scrolling => scrolling.Mode(TreeListScrollingMode.Standard))
.Paging(paging => {
paging.Enabled(true);
paging.PageSize(10);
})
.Pager(pager => {
pager.ShowPageSizeSelector(true);
pager.AllowedPageSizes(new[] { 5, 10, 20 });
pager.ShowInfo(true);
})
.Columns(columns => {
columns.AddFor(m => m.Task_Subject)
.Width(390);
columns.AddFor(m => m.Task_Assigned_Employee_ID)
.Lookup(lookup => lookup
.DataSource(ds => ds.WebApi()
.RouteName("TreeListTasks")
.LoadAction("TaskEmployees")
.Key("ID")
)
.ValueExpr("ID")
.DisplayExpr("Name")
);
columns.AddFor(m => m.Task_Status)
.Lookup(lookup => lookup
.DataSource(new[] {
"Not Started",
"Need Assistance",
"In Progress",
"Deferred",
"Completed"
})
);
columns.AddFor(m => m.Task_Start_Date).Width(100);
columns.AddFor(m => m.Task_Due_Date).Width(100);
})
)
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
The pager is configured in the pager object and contains the following elements:
-
Page navigator
Enables page navigation. -
Page size selector
Changes the page size. To display this element, enable the showPageSizeSelector property. You can also define the allowedPageSizes and specify the initial pageSize in the paging object. -
Page information
Displays the current page number and total record count. To display page information, enable the showInfo property. You can also use the infoText property to customize the information text string.
The pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager changes the appearance of the page navigator and page selector to use screen space more efficiently. In adaptive mode, the pager automatically chooses between the full and compact modes based on the TreeList's width. Use the displayMode property to switch between modes.