Pagination of DataGrid in WPF using MVVM
- Get link
- X
- Other Apps
In this Post i will explain the pagination using the MVVM pattern.
Lets first create the View with DataGrid and pagination control with First, Previous, Next and Last buttons and we will also have the number of record per page to be displayed in DataGrid option which is ComboBox and in this DataGrid i will load data from CSV file.
View
I will create the view with DataGrid like this
<Window x:Class="CURD.Views.EmployeeDetails"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CURD.Views"
mc:Ignorable="d"
Title="EmployeeDetails"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<StackPanel>
<DataGrid Grid.Row="1" ItemsSource="{Binding EmployeeCollection}"
AutoGenerateColumns="False" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding ID}"/>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Age" Binding="{Binding Age}"/>
<DataGridTextColumn Header="Gender" Binding="{Binding Gender}"/>
<DataGridTextColumn Header="Address" Binding="{Binding Address}"/>
</DataGrid.Columns>
</DataGrid>
<StackPanel Grid.Row="2" HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock Text="Records per page" VerticalAlignment="Center" Margin="5"/>
<ComboBox Margin="5" Width="100" SelectedItem="{Binding SelectedRecord,UpdateSourceTrigger=PropertyChanged}">
<sys:Int32>10</sys:Int32>
<sys:Int32>15</sys:Int32>
<sys:Int32>20</sys:Int32>
<sys:Int32>25</sys:Int32>
</ComboBox>
<Button Content="<<" Width="40" IsEnabled="{Binding IsFirstEnabled}"
ToolTip="First page" Margin="5" Command="{Binding FirstCommand}"/>
<Button Content="<" Width="40" Margin="5" IsEnabled="{Binding IsPreviousEnabled}"
ToolTip="Previous page" Command="{Binding PreviousCommand}"/>
<TextBlock VerticalAlignment="Center">
<TextBlock.Text>
<MultiBinding StringFormat="{} {0} of {1}">
<Binding Path="CurrentPage"/>
<Binding Path="NumberOfPages"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<Button Content=">" Width="40" Margin="5" IsEnabled="{Binding IsNextEnabled}"
ToolTip="Next page" Command="{Binding NextCommand}"/>
<Button Content=">>" Width="40" Margin="5" IsEnabled="{Binding IsLastEnabled}"
ToolTip="Last page" Command="{Binding LastCommand}"/>
</StackPanel>
</StackPanel>
</Window>
In the DataGrid we have five columns to display the five properties in DataGrid which are binded with the Model Properties.
All the four Buttons are binded with Command which will have in ViewModel.
Lets first create Model.
Model
public class EmployeeDetail : INotifyPropertyChanged
{
private string iD;
private string name;
private string age;
private string gender;
private string address;
public string ID
{
get => iD; set
{
iD = value;
OnPropertyChanged(nameof(ID));
}
}
public string Name { get => name; set {
name = value;
OnPropertyChanged(nameof(Name));
}
}
public string Age { get => age; set {
age = value;
OnPropertyChanged(nameof(Age));
}
}
public string Gender { get => gender; set {
gender = value;
OnPropertyChanged(nameof(Gender));
}
}
public string Address { get => address; set {
address = value;
OnPropertyChanged(nameof(Address));
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
- Get link
- X
- Other Apps
Comments
Post a Comment