[HxGrid] dropdown with the number of items per page and total records

[HybridSolutions]

Table component works great but it's too closed for customization. I leave a couple suggestions:

1. Allow Custom Sorting icons by providing some options like SortIcon, SortIconAsc and SortIconDesc of type string for CSS classes.
2. Allow Custom Pager icons by providing some options like PagerFirstItemCssClass, PagerPreviousItemCssClass, PagerPreviousItemCssClass, PagerNextItemCssClass of type string for CSS classes. Not everyone wants to use BS icons.
3. For even more customization, why not have a footer template that allows to use the already existing Pager component mixed with any other component. The pager could be connected automatically or manually to the table. This would allow to create richer footers that would present not only the pager in any position or style, but also a dropdown with the number of items per page, total records or even buttons with actions to apply to selected rows.

Example from Mud

<PagerContent>
        <MudTablePager PageSizeOptions="@_pageSizeOption" RowsPerPageString="Products per page" /> 
</PagerContent>

Thank you! Keep up the fine work!

[hakenr]

1. Allow Custom Sorting icons by providing some options like SortIcon, SortIconAsc and SortIconDesc of type string for CSS classes.

You can set your own icons using the Settings parameter or project-wide with the HxGrid.Defaults property.

<HxGrid Settings="new GridSettings() { SortAscendingIcon = ..., SortDescendingIcon = .... }" />

or somewhere in Program.cs

HxGrid.Defaults.SortAscendingIcon = ...;
HxGrid.Defaults.SortDescendingIcon = ...;

2. Allow Custom Pager icons by providing some options like PagerFirstItemCssClass, PagerPreviousItemCssClass, PagerPreviousItemCssClass, PagerNextItemCssClass of type string for CSS classes. Not everyone wants to use BS icons.
3. For even more customization, why not have a footer template that allows to use the already existing Pager component mixed with any other component. The pager could be connected automatically or manually to the table. This would allow to create richer footers that would present not only the pager in any position or style, but also a dropdown with the number of items per page, total records or even buttons with actions to apply to selected rows.

The intended approach for more specific customization is to disable/hide built-in paging in HxGrid and use a standalone HxPager or any other paging implementation instead (HxGrid exposes bindable CurrentUserState for this scenario). We will consider adding a demo on this setup.
We might extend this to built-in customization in the future (similar to Mud), but currently we don't see much demand for such feature when there is a way you can achieve this on your own.

[HybridSolutions]

Hi,

meanwhile I tried the Settings parameter but it's not working at all.

Settings = "new GridSettings() { SortAscendingIcon = MyFontIcon.sortAsc, SortDescendingIcon= MyFontIcon.sortDesc }"

I also tried to set PageSize and use your own icons but only the page size worked:

<HxGrid MultiSelectionEnabled="true"
            
            Settings = "new GridSettings() { PageSize=15, SortAscendingIcon = BootstrapIcon.Alarm}"
            
            TableContainerCssClass="table-responsive" 
            TableCssClass="table-row-bordered table-row-dashed gy-5 ecm-table"
            HeaderRowCssClass="fw-bolder fs-6 text-gray-800"
            ItemRowCssClass="align-middle form-check-sm form-check-solid"
            @bind-SelectedDataItems="selectedUsers" TItem="User" DataProvider="GetGridData">
            <Columns>
            ...

The rendered html always shows the class hx-icon bi-sort-alpha-down or hx-icon bi-sort-alpha-down-alt. Only working if I set them in Program.cs what I wanted to avoid since I need to set this on a component basis.

Tried to add a @ref="myGrid" to the component and access grid Settings method to set properties but not working either.

Any ideas?

The Pager, tried to do this:

<HxPager CurrentPageIndex=@CurrentPageIndex CurrentPageIndexChanged="@HandleCurrentPageIndexChanged" TotalPages=@totalPages DisplayNumberCount=3></HxPager>


    public HxGrid<User> MyGrid { get; set; }
    public GridUserState<User> CurrentUserState { get; set; }
    public int CurrentPageIndex { get; set; }

    // Pager Event 
    private void HandleCurrentPageIndexChanged(int currentPageIndex)
    {
        GridUserState<User> gridUserState = new GridUserState<User>{
             PageIndex = currentPageIndex,
             Sorting = MyGrid.CurrentUserState.Sorting
        };

        MyGrid.CurrentUserState = gridUserState;
        CurrentPageIndex = currentPageIndex;
        StateHasChanged();
    }

Is this the correct method to do it? It works but how do you hide the built in pager so I don't get two? There's no property to hide the grid pager.

[crdo]

@hakenr +1 for "dropdown with the number of items per page and total records" as it is requested on one of our apps.