Skip to content

Commit a9b3733

Browse files
SadhanaBaskaranSadhanaBaskaran
committed
993664: Updated the UG content and samples for Blazor Pager Component
1 parent 8a9f4b3 commit a9b3733

File tree

2 files changed

+90
-122
lines changed

2 files changed

+90
-122
lines changed

‎blazor/pager/pager-with-drop-down.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: Configure a Page-Size Dropdown in the Blazor Pager Component | Syncfusion
4-
description: Learn how to enable page-size selection with a dropdown in the Syncfusion Blazor Pager component.
3+
title: Configure Page-Size Dropdown in Blazor Pager Component | Syncfusion
4+
description: Learn how to configure a page-size dropdown in the Syncfusion Blazor Pager component for flexible pagination and improved navigation.
55
platform: Blazor
66
control: Pager
77
documentation: ug

‎blazor/pager/template.md‎

Lines changed: 88 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
33
title: Pager with Template in Blazor Pager Component | Syncfusion
4-
description: Checkout and learn here all about how to render a custom element in the Syncfusion Blazor Pager component and much more.
4+
description: Learn how to render custom elements using the Template property in the Syncfusion Blazor Pager component.
55
platform: Blazor
66
control: Pager
77
documentation: ug
88
---
99

1010
# Pager Component with Template
1111

12-
The Pager component provides an option to render a custom element or content in the Pager. This can be achieved by using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_Template) property of the Pager. 
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component divides large data collections into manageable pages and provides built-in navigation controls. The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_Template) property extends this functionality by allowing any Blazor content such as **buttons**, **hyperlinks**, or **drop-down lists** to be rendered inside the pager area, enabling fully customized paging experiences that align with application requirements and design guidelines.
1313

14-
In this following sample, we have rendered two anchor tags for navigating next and previous pages. And the pager info detail is displayed in between those two anchor tags. The anchor tags will be disabled based on the current page number using Pager APIs.
14+
This configuration renders two **anchor** elements for navigating to **previous** and **next** pages, with page information displayed between them. Navigation elements are dynamically enabled or disabled based on the current page using Pager APIs.
1515

1616
```cshtml
1717
@using Syncfusion.Blazor.Data
@@ -20,169 +20,137 @@ In this following sample, we have rendered two anchor tags for navigating next a
2020
@using Syncfusion.Blazor.DropDowns
2121
@using Syncfusion.Blazor.Buttons
2222
23-
<div class="control-section">
24-
<SfGrid @ref="Grid" DataSource="@Orders" Query="@QueryData">
23+
<div class="control-section">
24+
<SfGrid @ref="grid" DataSource="@Orders" Query="@queryData">
2525
<GridColumns>
26-
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
27-
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
28-
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
29-
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
30-
<GridColumn Field=@nameof(Order.ShippedDate) HeaderText=" Shipped Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
26+
<GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
27+
<GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer Name" Width="150"></GridColumn>
28+
<GridColumn Field="@nameof(Order.OrderDate)" HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
29+
<GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
30+
<GridColumn Field="@nameof(Order.ShippedDate)" HeaderText="Shipped Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
3131
</GridColumns>
3232
</SfGrid>
3333
34-
<SfPager @ref="Pager" TotalItemsCount=80 NumericItemsCount=5 PageSize=10 CurrentPage=1>
34+
<SfPager @ref="pager" TotalItemsCount="80" NumericItemsCount="5" PageSize="10" CurrentPage="1">
3535
<Template>
3636
@{
37-
var Page = (context as PagerTemplateContext);
38-
<div class=" e-pagerContainer">
39-
<div class="@($" e-navigationStyle {EnablePreviousButton()}")" @onclick="NavigatePreviousPage">
37+
var pageContext = (context as PagerTemplateContext);
38+
<div class="e-pagerContainer">
39+
<div class="@($"e-navigationStyle {EnablePreviousButton()}")" @onclick="NavigatePreviousPage">
4040
<a>Previous</a>
4141
</div>
4242
<div>
43-
<span>Page </span><div><SfDropDownList Width="64px" Value=@(ddlIndex+1) DataSource=@DropdownDataSource TValue="int" TItem="TemplateDropdown">
44-
<DropDownListEvents TItem="TemplateDropdown" TValue="int" ValueChange="@ValueChangeHandler" ></DropDownListEvents>
45-
<DropDownListFieldSettings Value="Paging" ></DropDownListFieldSettings>
46-
</SfDropDownList></div><span> of <b>@Page.TotalPages</b></span>
43+
<span>Page </span>
44+
<SfDropDownList Width="64px" Value="@(ddlIndex + 1)" DataSource="@dropdownDataSource" TValue="int" TItem="TemplateDropdown">
45+
<DropDownListEvents TItem="TemplateDropdown" TValue="int" ValueChange="@ValueChangeHandler"></DropDownListEvents>
46+
<DropDownListFieldSettings Value="Paging"></DropDownListFieldSettings>
47+
</SfDropDownList>
48+
<span> of <b>@pageContext.TotalPages</b></span>
4749
</div>
48-
<div class="@($" e-navigationStyle {EnableNextButton()}")" @onclick="NavigateNextPage">
50+
<div class="@($"e-navigationStyle {EnableNextButton()}")" @onclick="NavigateNextPage">
4951
<a>Next</a>
5052
</div>
5153
</div>
5254
}
53-
</Template>
55+
</Template>
5456
</SfPager>
5557
</div>
5658
57-
@code
58-
{
59-
public List<Order> Orders { get; set; }
60-
public SfGrid<Order> Grid { get; set; }
61-
public SfPager Pager { get; set; }
62-
private bool BackButtonDisabled { get; set; } = true;
63-
private bool ForwardButtonDisabled { get; set; }
64-
private Query QueryData = new Syncfusion.Blazor.Data.Query().Skip(0).Take(10);
65-
public int ddlIndex { get; set; } = 0;
59+
<style>
60+
.disable-pointer { pointer-events: none; }
61+
.enable-pointer { pointer-events: auto; }
62+
.e-navigationStyle { padding: 13px 12px 10px 12px; text-align: center; min-width: 26px; }
63+
</style>
6664
67-
private async Task ValueChangeHandler(ChangeEventArgs<int, TemplateDropdown> args)
65+
@code {
66+
private SfGrid<Order>? grid;
67+
private SfPager? pager;
68+
private bool backButtonDisabled = true;
69+
private bool forwardButtonDisabled;
70+
private Query queryData = new Query().Skip(0).Take(10);
71+
private int ddlIndex = 0;
72+
73+
public List<Order> Orders { get; set; } = new();
74+
private List<TemplateDropdown> dropdownDataSource = new()
6875
{
69-
var currentPage = args.Value -1;
70-
int skipValue = (currentPage * Pager.PageSize);
71-
int takeValue = Pager.PageSize;
72-
QueryData = new Query().Skip(skipValue).Take(takeValue);
73-
ddlIndex = currentPage;
74-
int totalPages = (int)(Math.Ceiling((double)(Pager.TotalItemsCount / Pager.PageSize)));
75-
if (args.Value == totalPages)
76-
{
77-
ForwardButtonDisabled = true;
78-
BackButtonDisabled = false;
79-
}
80-
else if (args.Value == 1)
81-
{
82-
ForwardButtonDisabled = false;
83-
BackButtonDisabled = true;
84-
}
85-
else
86-
{
87-
ForwardButtonDisabled = false;
88-
BackButtonDisabled = false;
89-
}
90-
await Task.Yield();
91-
await Grid.Refresh();
92-
await Pager.GoToPageAsync(args.Value);
93-
}
76+
new TemplateDropdown() { Paging = 1 },
77+
new TemplateDropdown() { Paging = 2 },
78+
new TemplateDropdown() { Paging = 3 },
79+
new TemplateDropdown() { Paging = 4 },
80+
new TemplateDropdown() { Paging = 5 },
81+
new TemplateDropdown() { Paging = 6 },
82+
new TemplateDropdown() { Paging = 7 },
83+
new TemplateDropdown() { Paging = 8 }
84+
};
9485
95-
public string EnablePreviousButton()
86+
protected override void OnInitialized()
9687
{
97-
string classNames = BackButtonDisabled ? "e-disabled disable-pointer" : "enable-pointer";
98-
return classNames;
88+
Orders = Enumerable.Range(1, 80).Select(x => new Order()
89+
{
90+
OrderID = 1000 + x,
91+
CustomerID = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" }[new Random().Next(5)],
92+
Freight = 2.1 * x,
93+
OrderDate = DateTime.Now.AddDays(-x),
94+
ShippedDate = DateTime.Now.AddDays(x)
95+
}).ToList();
9996
}
10097
101-
public string EnableNextButton()
98+
private async Task ValueChangeHandler(ChangeEventArgs<int, TemplateDropdown> args)
10299
{
103-
string classNames = ForwardButtonDisabled ? "e-disabled e-disable disable-pointer" : "enable-pointer";
104-
return classNames;
100+
var currentPage = args.Value - 1;
101+
int skipValue = currentPage * (pager?.PageSize ?? 10);
102+
int takeValue = pager?.PageSize ?? 10;
103+
queryData = new Query().Skip(skipValue).Take(takeValue);
104+
ddlIndex = currentPage;
105+
106+
int totalPages = (int)Math.Ceiling((double)(pager?.TotalItemsCount ?? 80) / (pager?.PageSize ?? 10));
107+
forwardButtonDisabled = args.Value == totalPages;
108+
backButtonDisabled = args.Value == 1;
109+
110+
await grid?.Refresh();
111+
await pager?.GoToPageAsync(args.Value);
105112
}
106113
107-
public async Task NavigatePreviousPage()
114+
private string EnablePreviousButton() => backButtonDisabled ? "e-disabled disable-pointer" : "enable-pointer";
115+
private string EnableNextButton() => forwardButtonDisabled ? "e-disabled disable-pointer" : "enable-pointer";
116+
117+
private async Task NavigatePreviousPage()
108118
{
109-
ForwardButtonDisabled = ForwardButtonDisabled ? false : ForwardButtonDisabled;
110-
BackButtonDisabled = Pager.CurrentPage == 2 ? true : false;
111-
int skipValue = (Pager.CurrentPage * Pager.PageSize) - (Pager.PageSize * 2);
112-
int takeValue = Pager.PageSize;
113-
QueryData = new Query().Skip(skipValue).Take(takeValue);
119+
backButtonDisabled = pager?.CurrentPage == 2;
120+
forwardButtonDisabled = false;
121+
int skipValue = ((pager?.CurrentPage ?? 2) * (pager?.PageSize ?? 10)) - ((pager?.PageSize ?? 10) * 2);
122+
queryData = new Query().Skip(skipValue).Take(pager?.PageSize ?? 10);
114123
ddlIndex--;
115-
await Grid.Refresh();
116-
await Pager.GoToPreviousPageAsync();
124+
await grid?.Refresh();
125+
await pager?.GoToPreviousPageAsync();
117126
}
118127
119-
public async Task NavigateNextPage()
128+
private async Task NavigateNextPage()
120129
{
121-
BackButtonDisabled = BackButtonDisabled ? false : BackButtonDisabled;
122-
int totalPages = (int)(Math.Ceiling((double)(Pager.TotalItemsCount / Pager.PageSize)));
123-
ForwardButtonDisabled = Pager.CurrentPage == totalPages - 1 ? true : false;
124-
int skipValue = (Pager.CurrentPage * Pager.PageSize);
125-
int takeValue = Pager.PageSize;
126-
QueryData = new Query().Skip(skipValue).Take(takeValue);
130+
backButtonDisabled = false;
131+
int totalPages = (int)Math.Ceiling((double)(pager?.TotalItemsCount ?? 80) / (pager?.PageSize ?? 10));
132+
forwardButtonDisabled = pager?.CurrentPage == totalPages - 1;
133+
int skipValue = (pager?.CurrentPage ?? 1) * (pager?.PageSize ?? 10);
134+
queryData = new Query().Skip(skipValue).Take(pager?.PageSize ?? 10);
127135
ddlIndex++;
128-
await Grid.Refresh();
129-
await Pager.GoToNextPageAsync();
130-
}
131-
132-
protected override void OnInitialized()
133-
{
134-
Orders = Enumerable.Range(1, 80).Select(x => new Order()
135-
{
136-
OrderID = 1000 + x,
137-
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
138-
Freight = 2.1 * x,
139-
OrderDate = DateTime.Now.AddDays(-x),
140-
ShippedDate = DateTime.Now.AddDays(x),
141-
}).ToList();
142-
136+
await grid?.Refresh();
137+
await pager?.GoToNextPageAsync();
143138
}
144139
145-
public class Order
140+
public class Order
146141
{
147142
public int? OrderID { get; set; }
148143
public string CustomerID { get; set; }
149144
public DateTime? OrderDate { get; set; }
150145
public double? Freight { get; set; }
151146
public DateTime? ShippedDate { get; set; }
152147
}
148+
153149
public class TemplateDropdown
154150
{
155151
public int Paging { get; set; }
156152
}
157-
List<TemplateDropdown> DropdownDataSource = new List<TemplateDropdown>
158-
{
159-
new TemplateDropdown() { Paging = 1},
160-
new TemplateDropdown() { Paging = 2},
161-
new TemplateDropdown() { Paging = 3},
162-
new TemplateDropdown() { Paging = 4},
163-
new TemplateDropdown() { Paging = 5},
164-
new TemplateDropdown() { Paging = 6},
165-
new TemplateDropdown() { Paging = 7},
166-
new TemplateDropdown() { Paging = 8}
167-
};
168153
}
169-
170-
<style>
171-
.disable-pointer{
172-
pointer-events: none;
173-
}
174-
.enable-pointer{
175-
pointer-events: auto;
176-
}
177-
.disable-hover{
178-
pointer-events: none;
179-
}
180-
.e-navigationStyle {
181-
padding: 13px 12px 10px 12px;
182-
text-align: center;
183-
min-width: 26px;
184-
}
185-
</style>
186154
```
187155

188156
![Blazor Pager with Template](./images/blazor-pager-with-template.gif)

0 commit comments

Comments
 (0)