DataPager

in namespace DotVVM.Framework.Controls

Renders the pagination control which can be integrated with the GridViewDataSet object to provide the paging capabilities.

Usage & Scenarios

Used in cooperation with a GridView, Repeater or a similar control, the DataPager can render the buttons which allow the user to browse a large collection of records using pages.

The DataPager requires a GridViewDataSet object in the viewmodel. This object keeps track of the page size, current page number, and also holds the data of the current page. It can also be used as a DataSource in GridView, Repeater or similar controls.

Sample 1: Basic Usage

The Customers is a property of IGridViewDataSet in the viewmodel.

The DataPager and GridView must be bound to the same GridViewDataSet.

page.dothtml
ViewModel.cs

<dot:GridView DataSource="{value: Customers}">
  <Columns>
    <dot:GridViewTextColumn ValueBinding="{value: Id}" HeaderText="ID" />
    <dot:GridViewTextColumn ValueBinding="{value: Name}" HeaderText="Name" />
  </Columns>
</dot:GridView>

<dot:DataPager DataSet="{value: Customers}" class="pager" />

using System;
using System.Linq;
using System.Threading.Tasks;
using DotVVM.Framework.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.DataPager.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        private static IQueryable<Customer> GetData()
        {
            return new[]
            {
                new Customer(0, "Dani Michele"), new Customer(1, "Elissa Malone"), new Customer(2, "Raine Damian"),
                new Customer(3, "Gerrard Petra"), new Customer(4, "Clement Ernie"), new Customer(5, "Rod Fred"),
                new Customer(6, "Oliver Carr"), new Customer(7, "Jackson James"), new Customer(8, "Dexter Nicholson"),
                new Customer(9, "Jamie Rees"), new Customer(10, "Jackson Ross"), new Customer(11, "Alonso Sims"),
                new Customer(12, "Zander Britt"), new Customer(13, "Isaias Ford"), new Customer(14, "Braden Huffman"),
                new Customer(15, "Frederick Simpson"), new Customer(16, "Charlie Andrews"), new Customer(17, "Reuben Byrne")
            }.AsQueryable();
        }

        public GridViewDataSet<Customer> Customers { get; set; }

        public override Task PreRender()
        {
            // fill data set from IQueryable
            Customers.LoadFromQueryable(GetData());

            // NOTE: You can also fill the DataSet manually.
            // Just set the Items, PageSize, PageIndex 
            // and TotalItemsCount properties
    
            return base.PreRender();
        }

        public ViewModel()
        {
            // creates new GridViewDataSet and sets PageSize
            Customers = new GridViewDataSet<Customer>() { PageSize = 4 };
        }

    }


    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }

        public Customer()
        {
            // NOTE: This default constructor is required. 
            // Remember that the viewmodel is JSON-serialized
            // which requires all objects to have a public 
            // parameterless constructor
        }

        public Customer(int id, string name)
        {
            Id = id;
            Name = name;
        }
    }
}

Sample 2: Templating the DataPager

You can specify your own button templates to specify custom content for the pager buttons:

FirstPageTemplate LastPageTemplate NextPageTemplate PreviousPageTemplate

Also, using the RenderLinkForCurrentPage you can define whether the current page button will be a hyperlink (<a href="...">) or just plain text.

page.dothtml
ViewModel.cs

<dot:GridView DataSource="{value: Customers}">
  <Columns>
    <dot:GridViewTextColumn ValueBinding="{value: Id}" HeaderText="ID" />
    <dot:GridViewTextColumn ValueBinding="{value: Name}" HeaderText="Name" />
  </Columns>
</dot:GridView>

<dot:DataPager DataSet="{value: Customers}" class="pager" 
               RenderLinkForCurrentPage="true">
  <FirstPageTemplate>
    <span>First</span>
  </FirstPageTemplate>
  <LastPageTemplate>
    <span>Last</span>
  </LastPageTemplate>
  <NextPageTemplate>Next</NextPageTemplate>
  <PreviousPageTemplate>Previous</PreviousPageTemplate>
</dot:DataPager>

using System.Linq;
using System.Threading.Tasks;
using DotVVM.Framework.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.DataPager.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        private static IQueryable<Customer> GetData()
        {
            return new[]
            {
                new Customer(0, "Dani Michele"), new Customer(1, "Elissa Malone"), new Customer(2, "Raine Damian"),
                new Customer(3, "Gerrard Petra"), new Customer(4, "Clement Ernie"), new Customer(5, "Rod Fred"),
                new Customer(6, "Oliver Carr"), new Customer(7, "Jackson James"), new Customer(8, "Dexter Nicholson"),
                new Customer(9, "Jamie Rees"), new Customer(10, "Jackson Ross"), new Customer(11, "Alonso Sims"),
                new Customer(12, "Zander Britt"), new Customer(13, "Isaias Ford"), new Customer(14, "Braden Huffman"),
                new Customer(15, "Frederick Simpson"), new Customer(16, "Charlie Andrews"), new Customer(17, "Reuben Byrne")
            }.AsQueryable();
        }

        public GridViewDataSet<Customer> Customers { get; set; }

        public override Task PreRender()
        {
            // fill data set from IQueryable
            Customers.LoadFromQueryable(GetData());

            // NOTE: You can also fill the DataSet manually.
            // Just set the Items, PageSize, PageIndex 
            // and TotalItemsCount properties

            return base.PreRender();
        }

        public ViewModel()
        {
            // creates new GridViewDataSet and sets PageSize
            Customers = new GridViewDataSet<Customer>() { PageSize = 4 };
        }

    }


    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }

        public Customer()
        {
            // NOTE: This default constructor is required. 
            // Remember that the viewmodel is JSON-serialized
            // which requires all objects to have a public 
            // parameterless constructor
        }

        public Customer(int id, string name)
        {
            Id = id;
            Name = name;
        }
    }
}

Properties

Name	Type	Description	Notes	Default Value
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	1
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.	attribute inner element static value bindable default	null
DataSet	IGridViewDataSet	Gets or sets the GridViewDataSet object in the viewmodel.	attribute inner element static value bindable default	null
Enabled	Boolean		attribute inner element static value bindable default	True
FirstPageTemplate	ITemplate	Gets or sets the template of the button which moves the user to the first page.	attribute inner element static value bindable default	null
HideWhenOnlyOnePage	Boolean	Gets or sets whether the pager should hide automatically when there is only one page of results. Must not be set to true when using the Visible property.	attribute inner element static value bindable default	True
ID	String	Gets or sets the unique control ID.	attribute inner element static value bindable default	null
InnerText	String	Gets or sets the inner text of the HTML element.	attribute inner element static value bindable default	null
LastPageTemplate	ITemplate	Gets or sets the template of the button which moves the user to the last page.	attribute inner element static value bindable default	null
NextPageTemplate	ITemplate	Gets or sets the template of the button which moves the user to the next page.	attribute inner element static value bindable default	null
PreviousPageTemplate	ITemplate	Gets or sets the template of the button which moves the user to the previous page.	attribute inner element static value bindable default	null
RenderLinkForCurrentPage	Boolean	Gets or sets whether a hyperlink should be rendered for the current page number. If set to false, only a plain text is rendered.	attribute inner element static value bindable default	False
Visible	Boolean	Gets or sets whether the control is visible.	attribute inner element static value bindable default	True

HTML produced by the control

This control renders an unordered list with hyperlinks in list items. The First, Previous, Next and Last link contents can be templated using the FirstPageTemplate, PreviousPageTemplate, NextPageTemplate and LastPageTemplate.

<ul>
  <li><a href="...">&raquo;&raquo;</a></li>
  <li><a href="...">&raquo;</a></li>
  
  <li><a href="...">1</a></li>
  <li><a href="...">2</a></li>
  <li>3</li>
  <li><a href="...">4</a></li>
  <li><a href="...">5</a></li>

  <li><a href="...">&laquo;</a></li>
  <li><a href="...">&laquo;&laquo;</a></li>
</ul>