DxGrid.PagerVisible Property

Specifies whether the Grid displays the pager.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool PagerVisible { get; set; }

Property Value

Type	Default	Description
Boolean	true	true to display the pager; otherwise, false.

Remarks

The Grid component splits data rows across multiple pages. The pager allows users to navigate between pages. To customize the pager’s appearance, handle the CustomizeElement event.

The Grid hides the pager in the following cases:

• The number of rows is less than or equal to the PageSize value and both the page size selector and pager summary are hidden.
• You enable the ShowAllRows option to display all rows on one page and do not add the All item to the page size selector.
• You enable the VirtualScrollingEnabled property.

Grid does not support a template for the pager. If you want to display custom content in the pager area, set the PagerVisible property to false to hide the default pager and organize your own components for navigation in an external container.

The following code snippet displays an external DxPager component instead of the built-in pager:

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxPager @bind-ActivePageIndex="@PageIndex"
         PageCount="10" />
<br/>

<DxGrid Data="@Data"
        PagerVisible="false"
        @bind-PageIndex="@PageIndex">
    <Columns>
        <DxGridDataColumn FieldName="ShipName" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="ShipCountry" />
        <DxGridDataColumn FieldName="Freight" />
        <DxGridDataColumn FieldName="OrderDate" />
        <DxGridDataColumn FieldName="ShippedDate" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }
    NorthwindContext Northwind { get; set; }
    int PageIndex { get; set; } = 0;

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Orders.Take(100).ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Order

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class Order {
        public Order() {
            OrderDetails = new HashSet<OrderDetail>();
        }

        public int OrderId { get; set; }
        public string CustomerId { get; set; }
        public int? EmployeeId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public int? ShipVia { get; set; }
        public decimal? Freight { get; set; }
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }

        public virtual Customer Customer { get; set; }
        public virtual Shipper ShipViaNavigation { get; set; }
        public virtual ICollection<OrderDetail> OrderDetails { get; set; }
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<Order> Orders { get; set; }
        // ...

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<Order>(entity => {
                entity.HasIndex(e => e.CustomerId, "CustomerID");
                entity.HasIndex(e => e.CustomerId, "CustomersOrders");
                entity.HasIndex(e => e.EmployeeId, "EmployeeID");
                entity.HasIndex(e => e.EmployeeId, "EmployeesOrders");
                entity.HasIndex(e => e.OrderDate, "OrderDate");
                entity.HasIndex(e => e.ShipPostalCode, "ShipPostalCode");
                entity.HasIndex(e => e.ShippedDate, "ShippedDate");
                entity.HasIndex(e => e.ShipVia, "ShippersOrders");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.CustomerId)
                    .HasMaxLength(5)
                    .HasColumnName("CustomerID")
                    .IsFixedLength(true);
                entity.Property(e => e.EmployeeId).HasColumnName("EmployeeID");
                entity.Property(e => e.Freight)
                    .HasColumnType("money")
                    .HasDefaultValueSql("((0))");
                entity.Property(e => e.OrderDate).HasColumnType("datetime");
                entity.Property(e => e.RequiredDate).HasColumnType("datetime");
                entity.Property(e => e.ShipAddress).HasMaxLength(60);
                entity.Property(e => e.ShipCity).HasMaxLength(15);
                entity.Property(e => e.ShipCountry).HasMaxLength(15);
                entity.Property(e => e.ShipName).HasMaxLength(40);
                entity.Property(e => e.ShipPostalCode).HasMaxLength(10);
                entity.Property(e => e.ShipRegion).HasMaxLength(15);
                entity.Property(e => e.ShippedDate).HasColumnType("datetime");
                entity.HasOne(d => d.Customer)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.CustomerId)
                    .HasConstraintName("FK_Orders_Customers");
                entity.HasOne(d => d.ShipViaNavigation)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.ShipVia)
                    .HasConstraintName("FK_Orders_Shippers");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Program.cs

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

You can also display custom content in external pager area. Refer to the following section for an example: Implement a Custom Pager).

Run Demo: Data Grid - Paging

For additional information about paging in the Grid component, refer to the following topic: Paging in Blazor Grid.

Implements

PagerVisible