.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 Telerik UI for .NET MAUI TreeDataGrid
LoadOnDemandCollection.
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.