none
How can i add pagination to datagrid?

    Question

  • I have a grid in my page. I'm using this Grid with CollectionViewSource. How can i add pagination to this datagrid?
    
    <Page.Resources>
        <CollectionViewSource x:Key="smsPeopleViewSource" d:DesignSource="{d:DesignInstance my:SmsPeople}" />
      </Page.Resources>
      
      <Grid Style="{StaticResource GridStyle}" DataContext="{StaticResource smsPeopleViewSource}">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    
    <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" ItemsSource="{Binding}" Name="smsPeopleDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Width="400" >
            <DataGrid.Columns>
              <DataGridTemplateColumn x:Name="phoneNumberColumn" Header="Telefon" Width="150">
                <DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                    <TextBlock Text="{Binding Path=PhoneNumber}" />
                  </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
              </DataGridTemplateColumn>
    
              <DataGridTemplateColumn x:Name="nameSurnameColumn" Header="Adı Soyadı" Width="150">
                <DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                    <TextBlock Text="{Binding Path=NameSurname}" />
                  </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
              </DataGridTemplateColumn>
    
              <DataGridTemplateColumn x:Name="cancelColumn" Header="İptal" Width="SizeToHeader">
                <DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                    <CheckBox IsChecked="{Binding Path=IsCancelled}" />
                  </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
              </DataGridTemplateColumn>
            </DataGrid.Columns>
          </DataGrid>
    </Grid>
    

    Tuesday, July 12, 2011 10:40 AM

Answers

All replies

  • Hi,

     

    Take a look at this link. It provdies a sample of how to page a datagrid. hopefully it will be of some help 

     

    http://stackoverflow.com/questions/784726/wpf-datagrid

    Tuesday, July 12, 2011 10:56 AM
  • I made a little paging app once actually.
    I am not sure it fits your needs, but you can use whatever in it for your own purpose. :)

     

    <Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:WpfApplication1"
        Title="Window1" Width="250" Height="375">
      
      <StackPanel>
        <ScrollViewer Name="scrollViewer" Height="300" Width="250" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden">
          <Grid Name="myGrid"/>
        </ScrollViewer>
    
        <StackPanel Name="selector" Orientation="Horizontal"/>
      </StackPanel>
    </Window>
    
        public MainWindow()
        {
          InitializeComponent();
    
          for (int i = 0; i < 5; ++i)
          {
            Border border = new Border();
            border.Background = new SolidColorBrush(Colors.LightSteelBlue);
            border.Child = new Label { Content = "Page nr. " + i.ToString(), FontSize = 22 };
    
            myGrid.Children.Add(border);
    
            int count = myGrid.Children.Count;
    
            myGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(250) });
            myGrid.Children[count -1].SetValue(Grid.ColumnProperty, count - 1);
            selector.Children.Add(selectorButton(count-1));
          }
    }
    



    Developing is part of being a developer.
    Tuesday, July 12, 2011 11:24 AM
  • I tried this but it gives error at (index out of range error) last page.    

     

    public override object GetItemAt(int index)
    {
     var offset = index % (this._itemsPerPage); 
     return this._innerList[this.StartIndex + offset];
    }
    


     

     


    Tuesday, July 12, 2011 12:27 PM
  • Hi,

     

    Its a bit difficult for me to determine what the problem is using the information you have provided. 

    however, I have uploaded a project using the sample to my skydrive which you can download and use as you see fit.

     

    Let me know if you have any issues with it.

     

    The project you want is called Paging. 

    https://skydrive.live.com/redir.aspx?cid=96b7dfb9175defa8&resid=96B7DFB9175DEFA8!159

     

    Tuesday, July 12, 2011 12:59 PM
  • I tried your project. It happens when items count is not a multiple of itemsPerPage Property. I changed 2 to 4 below. Just change 2 to 4, run and go to last page.

     

       Paging = new PagingCollectionView(
        new List<object>
        {
         new { Animal = "Lion", Eats = "Tiger" },
         new { Animal = "Tiger", Eats = "Bear" },
         new { Animal = "Bear", Eats = "Oh my" },
         new { Animal = "Wait", Eats = "Oh my isn't an animal" },
         new { Animal = "Oh well", Eats = "Who is counting anyway" },
         new { Animal = "Need better content", Eats = "For posting on stackoverflow" }
        },
        4
       );
    


     


    Tuesday, July 12, 2011 2:06 PM
  • Your right. 

     

    Its a rubbish example of datagrid paging. 

     

    I found another link - 

     

    http://www.eggheadcafe.com/tutorials/aspnet/8a2ea78b-f1e3-45b4-93ef-32b2d802ae17/wpf-datagrid-custom-paging-and-sorting.aspx

    The download is at the bottom of the article?

     

    I downloaded it and tweaked it slightyl and its works really well. You can change the items per page count and it adjust brilliantly.

     

    It does make use of a vierw model and commands. How comfortable are you with MVVM, Commands etc?

    If you need me to explain some concepts than just ask.

    I could also look into trying to making it work without a view model. It wouldn't take much work if you would prefer that?

    • Marked as answer by Tempeck81 Wednesday, July 13, 2011 10:36 AM
    Tuesday, July 12, 2011 2:39 PM
  • Hi Tempeck81,

    Additional, you could refer to this link:

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/f72b38f1-38d6-4894-ab86-9a2e5ab5cdac

    And there is a sample named, 20100929DataPagerForWPF, you could download from https://skydrive.live.com/?cid=51b2fdd068799d15&sc=documents&id=51B2FDD068799D15%21416 and refer to CurrentPageNumber property.

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Tempeck81 Wednesday, July 13, 2011 10:36 AM
    Wednesday, July 13, 2011 12:30 AM
    Moderator