.NET MAUI DataPager Integration with TreeDataGrid
You can page the data of the Telerik UI for .NET MAUI TreeDataGrid by using the DataPager control.
Currently, the DataPager does not support the TreeDataGrid
LoadOnDemandcollection.
DataPager Features
Here is a list of the most important features of the DataPager control:
-
Binding to
IEnumerable—You can bind the Pager to any collection that implements theIEnumerableinterface. - Setting different Ellipsis modes—The ellipsis appears when the count of the page numbers is greater than the count of the numeric buttons.
- Setting different Display modes—You can decide which of the visual elements in the DataPager will be visible.
-
Configuring the pages by using the following properties:
-
PageIndex(int)—Sets the current page. -
PageSize(int)—Specifies the number of the items per page. The default value is10. -
PageSizes(IList<int>)—Specifies a list with page sizes the end user can choose from. The default values in the list are5, 10, 20, 50. -
ItemsSpacing(double)—Sets the spacing between the items in the pager.
-
-
Customizing the appearance of the DataPager by styling its elements:
Example
Here is an example of how to use the DataPager with the TreeDataGrid control.
1. Define the DataPager and the TreeDataGrid in XAML:
<Grid RowDefinitions="*, Auto">
<telerik:RadTreeDataGrid ItemsSource="{Binding PagedSource, Source={Reference dataPager}}"
AutoGenerateColumns="False">
<telerik:RadTreeDataGrid.ItemDescriptor>
<telerik:TreeDataGridItemDescriptor ItemsSourceBinding="{Binding Children}" />
</telerik:RadTreeDataGrid.ItemDescriptor>
<telerik:RadTreeDataGrid.BindingContext>
<local:ViewModel />
</telerik:RadTreeDataGrid.BindingContext>
<telerik:RadTreeDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Name" />
<telerik:DataGridNumericalColumn PropertyName="Size" />
<telerik:DataGridTextColumn PropertyName="Type" />
</telerik:RadTreeDataGrid.Columns>
</telerik:RadTreeDataGrid>
<telerik:RadDataPager x:Name="dataPager"
Source="{Binding Items}"
Grid.Row="1"
PageSize="2" />
<Grid.BindingContext>
<local:ViewModel />
</Grid.BindingContext>
</Grid>
2. Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Create a sample Data class:
public class Data
{
public Data(string name, int size, string type)
{
this.Name = name;
this.Size = size;
this.Type = type;
this.Children = new ObservableCollection<Data>();
}
public string Name { get; set; }
public int Size { get; set; }
public string Type { get; set; }
public ObservableCollection<Data> Children { get; set; }
}
4. Add the ViewModel class:
public class ViewModel
{
public ViewModel()
{
Items = new ObservableCollection<Data>();
Items.Add(new Data("My Projects", 234 ,"Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("Using latest Telerik .NET MAUI controls", 234 ,"Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("TreeDataGrid", 6, "File"),
new Data("CollectionView", 6, "File"),
new Data("DataGrid", 54, "File"),
new Data("Scheduler", 12, "File"),
new Data("TreeView", 2, "File"),
new Data("Calendar", 23, "File"),
new Data("RichTextEditor", 0, "File"),
new Data("PdfViewer", 55, "File"),
new Data("ToggleButton", 21, "File"),
new Data("TemplatedButton", 88, "File"),
}
},
new Data("Blank project", 0, "Folder")
}
});
Items.Add(new Data("Shared Documents", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("Reports", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("October", 234, "File"),
new Data("November", 0, "File"),
new Data("December", 409, "File")
}
}
}
});
Items.Add(new Data("Pictures", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("Camera Roll", 231, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("hello.png", 107, "File"),
new Data("happy_summer.png", 0, "File"),
new Data("avatar.png", 124, "File")
}
},
new Data("Saved Pictures", 453, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("vacation.png", 234, "File"),
new Data("november.png", 0, "File"),
new Data("mountains.png", 227, "File")
}
}
}
});
Items.Add(new Data("Documents", 876, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("Internal Usage Only", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("reports.docx", 234, "File"),
new Data("confidential.xlsx", 0, "File"),
new Data("internal_usage.pdf", 409, "File")
}
}
}
});
}
public ObservableCollection<Data> Items { get; set; }
}
For the DataPager Integration with TreeDataGrid example, go to the SDKBrowser Demo Application and navigate to the DataPager > Integration category.