AnkitSharma-007
Manage paging server side instead of client.
This component is great but needs a property where we can set the TotalItems instead of getting the count from the current items list so we can manage paging server side. The code should go something like this I haven't tested it yet but should work.
//We need the next extra props
/// <summary>
/// Total of Item for server side paging. This is not required field.
/// </summary>
[Parameter]
int TotalItems { get; set; }
/// <summary>
/// The Api URL to request the data. This is not required field.
/// </summary>
[Parameter]
string ApiUrl { get; set; }
protected override async Task OnInitAsync()
{
pagerSize = 5;
curPage = 1;
//Check if we are getting the records from the server side paged
if(!string.IsNullOrWhiteSpace(ApiUrl) && TotalItems != 0)
{
ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
totalPages = (int)Math.Ceiling(TotalItems / (decimal)PageSize);
}
else
{
ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
totalPages = (int)Math.Ceiling(Items.Count() / (decimal)PageSize);
}
SetPagerSize("forward");
}
public void updateList(int currentPage)
{
//Check if we are getting the records from the server side paged
if(!string.IsNullOrWhiteSpace(ApiUrl) && TotalItems != 0)
{
//We need to send to the serve the Page and RowsPerPage to filter on the search result
var getData = await Http.SendJson(HttpMethod.Post,ApiUrl, new
{
Page = currentPage,
RowsPerPage = PageSize,
//We could also do some advance options laters like this
//SortBy = SortBy ,
//Descending = Descending,
//SearchTerm = SearchTerm
});
//Server should return an object with the items and the count of total of items
ItemList = getData.Items
TotalItems = getData.TotalItems
}
else
{
ItemList = Items.Skip((currentPage - 1) * PageSize).Take(PageSize);
}
curPage = currentPage;
this.StateHasChanged();
}
In terms of reference for advance options take a look of this. https://vuetifyjs.com/en/components/data-tables
This sounds interesting. I will definitely consider it for next release. Meanwhile, If you want you can submit a PR with proper test cases.
@arivera12 did you get a vuetify datatable working with Blazor?
Feel free to join the discord server for Blazor: https://discord.gg/Xg9ja5s
@McHeff I ended doing my own bootstrap/blazor implementation with most of the features.
I have think about it and there is no advantage using/mixing with this kind of js frameworks like vuejs, angular, react cause blazor its already SPA and also we will complicated dev and we will not be using blazor context and power correctly. I know the fact we will still need some js libraries we will still need to mix with them for example charting libs like chartjs but this makes sense for use it cause it will give you a huge advantage instead of writing your own implementation of it on blazor side.
Oh okay I see. I was asking because having a vuetify datatable, or even just a datatable with sorting, paging, grouping etc would be very cool. I've had to write my own table component, but having like a vuetify or devexpress grid would be ideal... Consider joining the discord server
I understand but I think rewriting this over blazor would be better than using a js lib and making interop between blazor and js. Making a blazor datagrid with all features should not take too much time. I did my own grid on 2-3 days with paging on both sides client and server, general row filter client and server side and some other props which helps to customize the options available on the datagrid. Sorting should be a piece of cake using linq we just need to manage header click events and know the state of it if ascending or descendng but for this time I manage sorting on the server side. And what u mean by grouping? Never heard such of feature.
@arivera12 would you be interested in sharing your code or submitting a PR to the https://github.com/BlazorComponents/MatBlazor repo?
