DataPager

in namespace DotVVM.Framework.Controls.Bootstrap4

Extends the built-in DataPager control with Bootstrap CSS classes.

Usage & Scenarios

Extends the builtin DataPager control to set up Bootstrap look of the control.

https://getbootstrap.com/docs/4.3/components/pagination/

Sample 1: DataPager Sizing

Use the Size property to set the size of the pager.

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

<bs:DataPager DataSet="{value: Customers}" Size="Large" />
using System;
using System.Linq;
using System.Threading.Tasks;
using DotVVM.Framework.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.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 GridViewDataSet<Customer> Customers { get; set; } = new GridViewDataSet<Customer>() { PagingOptions = { PageSize = 4} };

        public override Task PreRender()
        {
            if (Customers.IsRefreshRequired)
            {
                var queryable = FakeDb();
                Customers.LoadFromQueryable(queryable);
            }
            return base.PreRender();
        }

    }


    
    public record Customer(int Id, string Name);
}

Properties

Name Type Description Notes Default Value
property icon ActiveItemCssClass String Gets or sets the CSS class to be applied to the currently active page number.
attribute
inner element
static value
bindable
default
active
property icon DataSet IPageableGridViewDataSet<IPagingOptions> Gets or sets the GridViewDataSet object in the viewmodel.
attribute
inner element
static value
bindable
default
null
property icon DisabledItemCssClass String Gets or sets the CSS class that to be applied to the disabled items.
attribute
inner element
static value
bindable
default
disabled
property icon Enabled Boolean
attribute
inner element
static value
bindable
default
True
property icon 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
property icon 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
property icon 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
property icon LinkID String
attribute
inner element
static value
bindable
default
null
property icon LinkVisible Boolean
attribute
inner element
static value
bindable
default
True
property icon ListItemID String
attribute
inner element
static value
bindable
default
null
property icon ListItemVisible Boolean
attribute
inner element
static value
bindable
default
True
property icon 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
property icon PageNumberTemplate ITemplate Gets or sets the template of the button which moves the user to the numbered page.
attribute
inner element
static value
bindable
default
null
property icon 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
property icon 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
property icon Size Size Size Gets or sets the size of the data pager.
attribute
inner element
static value
bindable
default
Default

Events

Name Type Description
event icon LoadData ICommandBinding Gets or sets the (static) command that will be triggered when the DataPager needs to load data (when navigating to different page). The command accepts one argument of type GridViewDataSetOptions`3 and should return a new GridViewDataSet`1 or GridViewDataSetResult`4.

HTML produced by the control