How to make show entries fluent ui blazor

[imroatulfaizah]

So, I try to use show entries select for data grid.
Can you help me how to make the show entries like in this photo.

[vnbaaij]

Our Paginator component is used for paging through a grid. It doesn't support the option that is shown in your image.

[imroatulfaizah]

is it there is a way to make show entries in data grid?

[coderdnewbie]

Yes it is possible. See screenshot.

Here is the code snippets I used to do it:

            <FluentSelect Width="140px;" Value="@selValue" ValueChanged="OnValueChanged" TOption="string">
                <FluentOption Value="10">Show 10 Items</FluentOption>
                <FluentOption Value="20">Show 20 Items</FluentOption>
                <FluentOption Value="50">Show 50 Items</FluentOption>
            </FluentSelect>

@code {

    private string selValue = "10";

    private async Task OnValueChanged(string selectedValue)
    {
        selValue = selectedValue;
        pagination.ItemsPerPage = int.Parse(selectedValue);
        await pagination.SetCurrentPageIndexAsync(0); // go to the first page
    }
}

Hope this works for you.

[thieng101]

@coderdnewbie yes, I agree. Also, do you know if there's a way to stay on the current page instead of resetting to the first page after changing the number of items per page?

[coderdnewbie]

When I tried to implement the feature it created too many bugs for me, I found it was simpler to go to the first page. You can add this feature if you get it stable. The line

await pagination.SetCurrentPageIndexAsync(0);

is the line which needs changing. When the number in the method is 0 this indicates the first page, so 1 indicates the second page etc.

[thieng101]

Yeah I understand. I spent about three pages to find the solution of showing entries. Then I found this post, which was really made my day lol.

For the feature. I was thinking if we could some how access the current page then instead of static numbers, we can pass that current page variable. I'm not sure if the Pagination Class has it.

[thieng101]

@coderdnewbie hey the class has _paginationState.CurrentPageIndex properties. So we can pass the current index page instead of first page. I don't think it will cause any errors as it's just passing a value. It is working fine for me.Everything is the same as your snippet code above, the only thing updated is:

private async Task OnValueChanged(string selectedValue) { selValue = selectedValue; _paginationState.ItemsPerPage = int.Parse(selectedValue); await _paginationState.SetCurrentPageIndexAsync(_paginationState.CurrentPageIndex); // refresh on the current page }

[coderdnewbie]

Sorry, it did not work for me. This is the scenario I tested. I had 100 items and showing 10 at a time. I went to page 2, to see the 15th item. I then changed to show 50 items at a time. It was still going to page 2, so was showing items 50 to 100 (and not the 15th item anymore). This the bug I originally found, and is more for your information. As long as you are happy with this behavior than it is fine.