Pagination of DataGrid in WPF using MVVM

-

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



And in this DataGrid i will load data from CSV file

<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="&lt;&lt;" Width="40" IsEnabled="{Binding IsFirstEnabled}"

                    ToolTip="First page" Margin="5" Command="{Binding FirstCommand}"/>

            <Button Content="&lt;" 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));

        }

    }


Now lets create the ViewModel

ViewModel


    public class EmployeeViewModel : INotifyPropertyChanged
    {
        public EmployeeViewModel()
        {
            EmployeeCollection = CollectionViewSource.GetDefaultView(LstEmployeeDetail);

            #region Pagination
            NextCommand = new Command((s) => true, NextPage);
            FirstCommand = new Command((s) => true, FirstPage);
            LastCommand = new Command((s) => true, LastPage);
            PreviousCommand = new Command((s) => true, PreviousPage);
            #endregion
            LoadEmployee();


        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        private ICollectionView _employeeCollection;

        public ICollectionView EmployeeCollection
        {
            get { return _employeeCollection; }
            set
            {
                _employeeCollection = value;
                OnPropertyChanged(nameof(EmployeeCollection));
            }
        }
        private ObservableCollection<EmployeeDetail> _lstEmployeeDetail = new ObservableCollection<EmployeeDetail>();

        public ObservableCollection<EmployeeDetail> LstEmployeeDetail
        {
            get { return _lstEmployeeDetail; }
            set
            {
                _lstEmployeeDetail = value;
                OnPropertyChanged(nameof(LstEmployeeDetail));
            }
        }
        private void LoadEmployee()//Read details
        {
            foreach (var record in ReadCSV(@"D:\EmployeeDetails.csv"))
            {
                var data = record.Split(',');
                var empDetails = new EmployeeDetail
                {
                    ID = data[0],
                    Name = data[1],
                    Age = data[2],
                    Gender = data[3],
                    Address = data[4]
                };
                LstOfRecords.Add(empDetails);
            }
            UpdateCollection(LstOfRecords.Take(SelectedRecord));
            UpdateRecordCount();

        }

        private void UpdateCollection(IEnumerable<EmployeeDetail> enumerable)
        {
            LstEmployeeDetail.Clear();
            foreach (var item in enumerable)
            {
                LstEmployeeDetail.Add(item);
            }
        }

        IEnumerable<string> ReadCSV(string filePath)
        {
            using (StreamReader reader = new StreamReader(filePath))
            {
                string line = string.Empty;
                while ((line = reader.ReadLine()) != null)
                {
                    var record = line.Trim();
                    if (!string.IsNullOrEmpty(record))
                        yield return record;
                }
            }
        }
       
        #region Pagination

        public ICommand FirstCommand { get; set; }
        public ICommand PreviousCommand { get; set; }
        public ICommand NextCommand { get; set; }
        public ICommand LastCommand { get; set; }

        private int _currentPage = 1;

        public int CurrentPage
        {
            get { return _currentPage; }
            set
            {
                _currentPage = value;
                OnPropertyChanged(nameof(CurrentPage));
                UpdateEnableState();
            }
        }

        private void UpdateEnableState()
        {
            IsFirstEnabled = CurrentPage > 1;
            IsPreviousEnabled = CurrentPage > 1;
            IsNextEnabled = CurrentPage < NumberOfPages;
            IsLastEnabled = CurrentPage < NumberOfPages;
        }

        private int _selectedRecord = 10;

        public int SelectedRecord
        {
            get { return _selectedRecord; }
            set
            {
                _selectedRecord = value;
                OnPropertyChanged(nameof(CurrentPage));
                UpdateRecordCount();
            }
        }

        private void UpdateRecordCount()
        {
            NumberOfPages = (int)Math.Ceiling((double)LstOfRecords.Count / SelectedRecord);
            NumberOfPages = NumberOfPages == 0 ? 1 : NumberOfPages;
            UpdateCollection(LstOfRecords.Take(SelectedRecord));
            CurrentPage = 1;
        }

        private int _numberOfPages = 10;

        public int NumberOfPages
        {
            get { return _numberOfPages; }
            set
            {
                _numberOfPages = value;
                OnPropertyChanged(nameof(NumberOfPages));
                UpdateEnableState();
            }
        }
        private bool _isFirstEnabled;

        public bool IsFirstEnabled
        {
            get { return _isFirstEnabled; }
            set
            {
                _isFirstEnabled = value;
                OnPropertyChanged(nameof(IsFirstEnabled));
            }
        }
        private bool _isPreviousEnabled;

        public bool IsPreviousEnabled
        {
            get { return _isPreviousEnabled; }
            set
            {
                _isPreviousEnabled = value;
                OnPropertyChanged(nameof(IsPreviousEnabled));
            }
        }
        private bool _isNextEnabled;

        public bool IsNextEnabled
        {
            get { return _isNextEnabled; }
            set
            {
                _isNextEnabled = value;
                OnPropertyChanged(nameof(IsNextEnabled));
            }
        }
        private bool _isLastEnabled;

        public bool IsLastEnabled
        {
            get { return _isLastEnabled; }
            set
            {
                _isLastEnabled = value;
                OnPropertyChanged(nameof(IsLastEnabled));
            }
        }

        public List<EmployeeDetail> LstOfRecords { get; private set; } = new List<EmployeeDetail>();

        int RecordStartFrom = 0;
        private void PreviousPage(object obj)
        {
            CurrentPage--;
            RecordStartFrom = LstOfRecords.Count - SelectedRecord * (NumberOfPages - (CurrentPage - 1));
            var recorsToShow = LstOfRecords.Skip(RecordStartFrom).Take(SelectedRecord);
            UpdateCollection(recorsToShow);
            UpdateEnableState();
        }

        private void LastPage(object obj)
        {
            var recordsToskip = SelectedRecord * (NumberOfPages - 1);
            UpdateCollection(LstOfRecords.Skip(recordsToskip));
            CurrentPage = NumberOfPages;
            UpdateEnableState();
        }

        private void FirstPage(object obj)
        {
            UpdateCollection(LstOfRecords.Take(SelectedRecord));
            CurrentPage = 1;
            UpdateEnableState();
        }
        private void NextPage(object obj)
        {
            RecordStartFrom = CurrentPage * SelectedRecord;
            var recordsToShow = LstOfRecords.Skip(RecordStartFrom).Take(SelectedRecord);
            UpdateCollection(recordsToShow);
            CurrentPage++;
            UpdateEnableState();
        }

        #endregion
    }

Now lets implementation the ICommand which we have used in ViewModel Commands.

  class Command : ICommand
    {
        public Command(Func<object, bool> methodCanExecute, Action<object> methodExecute)
        {
            MethodCanExecute = methodCanExecute;
            MethodExecute = methodExecute;
        }
        Action<object> MethodExecute;
        Func<object, bool> MethodCanExecute;
        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            return MethodExecute != null && MethodCanExecute.Invoke(parameter);
        }

        public void Execute(object parameter)
        {
            MethodExecute(parameter);
        }
    }
You can find explanation of this code on my YouTube Channel Wpf World




Comments

Post a Comment

Popular posts from this blog

Filter DataGrid and ListView in wpf using ICollectionView

-
Image
EmployeeDetails.xaml <UserControl x:Class="PrismMain.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:PrismMain.Views"         mc:Ignorable="d"        >     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,50,0,0">         <Grid.RowDefinitions>             <RowDefinition Height="50"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>         </Grid.RowDefinitions>         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
Read more

Connect SQL Server Database to WPF Application and Perform CRUD Operations

-
Image
In this post, we'll walk you through the step-by-step process of establishing a connection between your WPF application and a SQL Server database. By the end of this tutorial, you'll have a solid understanding of how to harness the power of SQL databases to manage your application's data efficiently. Let's get started! Step 1: Setting Up Your Project Open Visual Studio: Launch Visual Studio and create a new WPF project. <Window x:Class="WpfTutorialSeries.MainWindow"         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:WpfTutorialSeries"         mc:Ignorable="d"         Title="Registration" SizeToContent="WidthAndHeight&qu
Read more