Hello,
I just started using Radzen. I have a problem with pagination.
in summary: json object appears in table. The pagination list also appears on the table, but when you press the page number, it does not bring the desired page data, can you help?
@page "/company"
@using InventoryManagement.Frontend.Models
@using InventoryManagement.Frontend.Services
@using Radzen.Blazor
@inject ApiService ApiService
@if (companyModel != null && companyModel.data != null)
{
<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" class="mt-2 mb-4" Text="Yeni Şirket" Click="@InsertRow" Disabled=@(companyToInsert != null || companyToUpdate != null) />
<RadzenDataGrid @ref="companyGrid" AllowAlternatingRows="false" AllowFiltering="true" AllowPaging="true" Page="@Reset" AllowSorting="true" EditMode="DataGridEditMode.Single"
Data="@companyModel.data" TItem="CompanyModel" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" Sort="@Reset" Filter="@Reset"
Visible="true">
<Columns>
<RadzenDataGridColumn TItem="CompanyModel" Property="Id" Title="ID" Width="25%" Filterable="false" />
<RadzenDataGridColumn TItem="CompanyModel" Property="Name" Title="Name" Width="100%">
<EditTemplate Context="company">
<RadzenTextBox @bind-Value="company.Name" style="width: 100%" Name="Name"></RadzenTextBox>
<RadzenRequiredValidator style="display: grid" Component="Name" Text="Şirket adı zorunludur" Popup="true" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="CompanyModel" Property="Description" Title="Description" Width="100%">
<EditTemplate Context="company">
<RadzenTextBox @bind-Value=company.Description style="width: 100%"></RadzenTextBox>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="CompanyModel" Context="company" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Width="156px">
<Template Context="company">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Style="border-radius: 50%;" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => EditRow(company))" @onclick:stopPropagation="true">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Style="border-radius: 50%;" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRow(company))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="company">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Style="border-radius: 50%;" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(company))">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Style="border-radius: 50%;" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@((args) => CancelEdit(company))">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Style="border-radius: 50%;" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRow(company))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
<RadzenPager PageSize="@companyModel.pageSize" Count="@companyModel.totalCount" Page="@(new Action<PagerEventArgs>(args => companyGrid.GoToPage(args.PageIndex)))" />
}
else
{
<p>Company list loading...</p>
}
@code {
private PaginatedResult<CompanyModel> companyModel = new PaginatedResult<CompanyModel> { data = new List<CompanyModel>() };
private RadzenDataGrid<CompanyModel> companyGrid;
IEnumerable<CompanyModel> companies;
CompanyModel companyToInsert;
CompanyModel companyToUpdate;
void Reset()
{
companyToInsert = null;
companyToUpdate = null;
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
await LoadCompanyData(1,3);
}
async void ChangePage(PagerEventArgs args)
{
Console.WriteLine("ChangePage called");
int pageNumber = args.PageIndex + 1;
int pageSize = companyModel.pageSize;
await LoadCompanyData(pageNumber, pageSize);
StateHasChanged();
}
private async Task LoadCompanyData(int pageNumber, int pageSize)
{
Console.WriteLine(pageNumber.ToString(), pageSize);
companyModel = await ApiService.GetAsync<PaginatedResult<CompanyModel>>($"https://localhost:3000/api/Company/search?PageNumber={pageNumber}&PageSize={pageSize}");
companyModel.data = companyModel?.data ?? new List<CompanyModel>(); // sonra silebilirsin
Console.WriteLine(companyModel?.totalCount);
Console.WriteLine(pageNumber);
Console.WriteLine(pageSize);
StateHasChanged();
}
async void OnLoadData(LoadDataArgs args)
{
Console.WriteLine(args);
int pageNumber = args.Skip.Value / args.Top.Value + 1;
int pageSize = args.Top.Value;
await LoadCompanyData(pageNumber, pageSize);
companyGrid.CurrentPage = pageNumber - 1;
StateHasChanged();
}
#region Crud
private async Task InsertCompany(CompanyModel company)
{
var response = await ApiService.PostAsync("https://localhost:3000/api/Company", company);
if (response.IsSuccessStatusCode)
{
}
else
{
}
}
private async Task UpdateCompany(CompanyModel company)
{
var response = await ApiService.PutAsync<CompanyModel>("https://localhost:3000/api/Company", company);
if (response.IsSuccessStatusCode)
{
}
else
{
}
}
private async Task DeleteCompany()
{
var response = await ApiService.DeleteAsync("https://localhost:3000/api/Company");
if (response.IsSuccessStatusCode)
{
companyModel = null;
}
else
{
}
}
#endregion
#region Datatable
async Task EditRow(CompanyModel order)
{
companyToUpdate = order;
await companyGrid.EditRow(order);
}
void OnUpdateRow(CompanyModel order)
{
if (order == companyToInsert)
{
companyToInsert = null;
}
companyToUpdate = null;
UpdateCompany(order);
}
async Task SaveRow(CompanyModel company)
{
if (companyGrid != null)
{
await companyGrid.UpdateRow(company);
}
else
{
Console.WriteLine("companyGrid ");
}
}
void CancelEdit(CompanyModel order)
{
if (order == companyToInsert)
{
companyToInsert = null;
}
companyToUpdate = null;
companyGrid.CancelEditRow(order);
}
async Task DeleteRow(CompanyModel company)
{
if (company == companyToInsert)
{
companyToInsert = null;
}
if (company == companyToUpdate)
{
companyToUpdate = null;
}
if (companies.Contains(company))
{
await DeleteCompany();
await companyGrid.Reload();
}
else
{
companyGrid.CancelEditRow(company);
await companyGrid.Reload();
}
}
async Task InsertRow()
{
companyToInsert = new CompanyModel();
await companyGrid.InsertRow(companyToInsert);
}
void OnCreateRow(CompanyModel company)
{
InsertCompany(company);
companyToInsert = null;
}
#endregion
}
Json object
{
"data": [
{
"id": 6,
"name": "Company 1",
"description": "test test",
"createdBy": "",
"updatedBy": test,
"createdDate": "2023-06-06T17:04:57.4509578",
"updatedDate": "2023-06-08T11:34:24.6849087"
},
{
"id": 5,
"name": "Company 2 ",
"description": "test test",
"createdBy": "",
"updatedBy": null,
"createdDate": "2023-06-06T17:02:12.0677627",
"updatedDate": "2023-06-08T11:34:04.3324466"
},
{
"id": 1017,
"name": "Company 3 ",
"description": "test",
"createdBy": "test",
"updatedBy": null,
"createdDate": "2023-06-08T13:52:32.2477347",
"updatedDate": null
}
],
"currentPage": 1,
"totalPages": 7,
"totalCount": 19,
"pageSize": 3,
"hasPreviousPage": false,
"hasNextPage": true,
"messages": null,
"succeeded": true,
"exception": null,
"code": 0
}
Paginated Result class
public class PaginatedResult<T>
{
public List<T> data { get; set; }
public int currentPage { get; set; }
public int totalPages { get; set; }
public int totalCount { get; set; }
public int pageSize { get; set; }
public bool hasPreviousPage { get; set; }
public bool hasNextPage { get; set; }
public object messages { get; set; }
public bool succeeded { get; set; }
public object exception { get; set; }
public int code { get; set; }
}