Custom paging
 |
|
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true">
<GridPageSettings PageCount="12" PageSize="20"></GridPageSettings>
<GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents>
<GridColumns>
. . .
</GridColumns>
</SfGrid>
@code{
SfGrid<Order> Grid;
. . .
public void ActionBeginHandler(ActionEventArgs<Order> args)
{
if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Paging))
{
//you can get the clicked page number in args.CurrentPage. use this to peform your operation for paging.
// Here you can customize your code
}
}
} |
- Full code snippets.
- More details about your requirement.
Hello Syncfusion,
With a little of a puzzle with the awnsers linked and trying, I came with a solution that works well enough for me.
I Wanted to share this.
Within the template I show (in case possible) when on page 11 on the left side 1-10 and on the right side 12-21
In the middle is a box that is able to fill that cannot exceed the max amount of pages or negative. All letters are ignored by the catch. The numbers are clickable itself to go to the desired page.
This example has no records. The records are to be called when going to the page and than shown in the grid depending on the side (Get 20 records on page 10) When going to page 11 get the next 20 records from the database etc. This way I don't have to get thousends or records and get only what is needed at that moment.
I Hope I can help people with this.
@page "/TestPage"
@using Syncfusion.Blazor.Grids
<SfGrid @ref="defaultGrid" DataSource="students" AllowPaging="true">
<GridPageSettings PageSize="10">
<Template>
<div class="PagerTemplate">
<div class="@($"e-first e-icons e-icon-first {ValidateFirst()} align-icons e-firstpage")" @onclick="ShowFirstPage" title="Go to first page">
</div>
<div class="@($"e-prev e-icons e-icon-prev {ValidateBack()} align-icons")" @onclick="ShowPreviousPage" title="Go to previous page"></div>
@{
int maxPagesShow = pageNo + 10;
int minPagesShow = pageNo - 10;
for (int i = minPagesShow; i < pageNo; i++)
{
int local_i = i;
if (i !> 0)
{
<div class="e-next" @onclick="((args)=> ShowCurrentPage(local_i))">@i</div>
}
}
}
<div>
<input class="e-next textbox add-border" type="text" @bind="pageNo" size="2" @oninput="LaunchEnteredPage" />
<div id="totalpages" class="textbox"> of @totalPages pages </div>
</div>
@{
for (int i = (pageNo+1); i < maxPagesShow+1; i++)
{
if (i !< totalPages)
{
int local_i = i;
<div class="e-next" @onclick="((args)=> ShowCurrentPage(local_i))">@i</div>
}
}
}
<div class="@($"e-next e-icons e-icon-next {ValidateForward()} align-icons e-next")" @onclick="ShowNextPage" title="Go to next page"></div>
<div class="@($"e-last e-icons e-icon-last {ValidateLast()} align-icons")" @onclick="ShowLastPage" title="Go to last page"></div>
</div>
<style>
.PagerTemplate {
width: 1000px;
height: 64px;
left: 183px;
top: 615px;
border-radius: 0px;
}
.textbox {
margin-top: 9px;
margin-bottom: 9px;
margin-right: 2px;
text-align: center;
}
.add-border {
border: #ddd 1px solid;
}
.align-icons {
margin-top: 9px;
margin-bottom: 9px;
margin-right: 16px;
cursor: pointer;
}
.e-firstpage {
margin-left: 6px;
}
.e-next {
margin-left: 16px;
}
.disableFirst {
pointer-events: none;
opacity: 0.3;
}
.disableLast {
pointer-events: none;
opacity: 0.3;
}
.disableFront {
pointer-events: none;
opacity: 0.3;
}
.disableBack {
pointer-events: none;
opacity: 0.3;
}
</style>
</Template>
</GridPageSettings>
<GridColumns>
<GridColumn Field="@nameof(Student.OrderNr)" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public SfGrid< Students > defaultGrid;
public List<Students> students { get; set; }
public int pageNo { get; set; } = 1;
public int totalPages { get; set; } = 500;
public bool DisableBackIcon = false;
public bool DisableForwardIcon = false;
public bool DisableFirstIcon = false;
public bool DisableLastIcon = false;
protected override void OnInitialized()
{
base.OnInitialized();
}
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
//totalPages = defaultGrid.TotalItemCount / defaultGrid.PageSettings.PageSize;
}
pageNo = defaultGrid.PageSettings.CurrentPage;
if (defaultGrid.PageSettings.CurrentPage == totalPages)
{
DisableForwardIcon = true;
DisableLastIcon = true;
}
else
{
DisableForwardIcon = false;
DisableLastIcon = false;
}
if (defaultGrid.PageSettings.CurrentPage == 1)
{
DisableBackIcon = true;
DisableFirstIcon = true;
}
else
{
DisableBackIcon = false;
DisableFirstIcon = false;
}
StateHasChanged();
}
public string ValidateFirst()
{
if (DisableFirstIcon)
{
return "disableFirst";
}
return "";
}
public string ValidateLast()
{
if (DisableLastIcon)
{
return "disableLast";
}
return "";
}
public string ValidateForward()
{
if (DisableForwardIcon)
{
return "disableFront";
}
return "";
}
public string ValidateBack()
{
if (DisableBackIcon)
{
return "disableBack";
}
return "";
}
public void ShowNextPage()
{
defaultGrid.GoToPage((defaultGrid.PageSettings.CurrentPage) + 1);
}
public void ShowPreviousPage()
{
defaultGrid.GoToPage((defaultGrid.PageSettings.CurrentPage) - 1);
}
public void ShowFirstPage()
{
defaultGrid.GoToPage(1);
}
public void ShowLastPage()
{
defaultGrid.GoToPage(totalPages);
}
public void ShowCurrentPage(int pClickedPage)
{
defaultGrid.GoToPage(pClickedPage);
}
public void LaunchEnteredPage(Microsoft.AspNetCore.Components.ChangeEventArgs page)
{
if (page.Value == null || page.Value.ToString() == "")
{
return;
}
try
{
if (Convert.ToDouble(page.Value) < 0)
defaultGrid.GoToPage(1);
else if (Convert.ToDouble(page.Value) > totalPages)
defaultGrid.GoToPage(totalPages);
else
{
double enteredPage = Convert.ToDouble(page.Value);
if (enteredPage <= totalPages)
defaultGrid.GoToPage(enteredPage);
}
}
catch { return; }
}
}
