DataPager
in namespace DotVVM.BusinessPack.Controls
Renders the pagination control which can be integrated with the GridViewDataSet object to provide the pageOptions capabilities.
Usage & Scenarios
Inherits the built-in DataPager control with a DotVVM Business Pack visual style.
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 the GridView
controls must be bound to the same GridViewDataSet
object.
<bp:GridView DataSource="{value: Customers}">
<Columns>
<bp:GridViewTextColumn Value="{value: Id}" HeaderText="ID" />
<bp:GridViewTextColumn Value="{value: Name}" HeaderText="Name" />
</Columns>
</bp:GridView>
<bp:DataPager DataSet="{value: Customers}" class="pager" />
using System;
using System.Linq;
using System.Threading.Tasks;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DataPager.sample1
{
public class ViewModel : DotvvmViewModelBase
{
private static IQueryable<Customer> FakeDb()
{
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 BusinessPackDataSet<Customer> Customers { get; set; } = new BusinessPackDataSet<Customer>()
{
PagingOptions = {
PageSize = 10
}
};
public override Task PreRender()
{
if (Customers.IsRefreshRequired)
{
Customers.LoadFromQueryable(FakeDb());
}
return base.PreRender();
}
}
}
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DataPager.sample1
{
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.
<bp:GridView DataSource="{value: Customers}">
<Columns>
<bp:GridViewTextColumn Value="{value: Id}" HeaderText="ID" />
<bp:GridViewTextColumn Value="{value: Name}" HeaderText="Name" />
</Columns>
</bp:GridView>
<bp:DataPager DataSet="{value: Customers}" RenderLinkForCurrentPage="true">
<FirstPageTemplate>
<span>First</span>
</FirstPageTemplate>
<LastPageTemplate>
<span>Last</span>
</LastPageTemplate>
<NextPageTemplate>Next</NextPageTemplate>
<PreviousPageTemplate>Previous</PreviousPageTemplate>
</bp:DataPager>
using System.Linq;
using System.Threading.Tasks;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DataPager.sample2
{
public class ViewModel : DotvvmViewModelBase
{
private static IQueryable<Customer> FakeDb()
{
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 BusinessPackDataSet<Customer> Customers { get; set; } =new BusinessPackDataSet<Customer>() {
PagingOptions = {
PageSize = 10
}
};
public override Task PreRender()
{
if (Customers.IsRefreshRequired)
{
Customers.LoadFromQueryable(FakeDb());
}
return base.PreRender();
}
}
}
namespace DotvvmWeb.Views.Docs.Controls.businesspack.DataPager.sample2
{
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 | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
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
static value
bindable
|
null | |
DataSet | IPageableGridViewDataSet | Gets or sets the GridViewDataSet object in the viewmodel. |
attribute
bindable
|
null | |
Enabled | Boolean |
attribute
static value
bindable
|
False | ||
FirstPageTemplate | ITemplate | Gets or sets the template of the button which moves the user to the first page. |
inner element
static value
|
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
static value
|
True | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
LastPageTemplate | ITemplate | Gets or sets the template of the button which moves the user to the last page. |
inner element
static value
|
null | |
NextPageTemplate | ITemplate | Gets or sets the template of the button which moves the user to the next page. |
inner element
static value
|
null | |
PreviousPageTemplate | ITemplate | Gets or sets the template of the button which moves the user to the previous page. |
inner element
static value
|
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
static value
|
False | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
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
properties.
<ul>
<li><a href="...">»»</a></li>
<li><a href="...">»</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="...">«</a></li>
<li><a href="...">««</a></li>
</ul>