How could I get all items in current page that is showing?

skyrim 0
Viewed 65

For the offical example of multiselection, if set display 50 row per page and click select all checkbox in title row, indeed all rows in table are selected. The problem is that I just want to select all the rows in current page, is any way to achieve it? I do not want to click every row manually.

mudblazor blazor
1 Answers

I created a demo for what you want to achieve: https://try.mudblazor.com/snippet/GaGQENEheDggnxaW

I removed the default "select all" checkbox from header and footer by using MudTHeadRow and MudTFootRow components and setting IgnoreCheckbox property to true. Also setting CustomHeader and CustomFooter property to true on the MudTable component itself.

Then I added a new MudTh that displays my own custom checkbox. When the checkbox is clicked I add or remove items to the selectedItems1 HashSet based on the CurrentPage and RowsPerPage properties of the table.

<MudTable @ref="_tableRef" CustomHeader="true" CustomFooter="true" Items="@Elements" @bind-SelectedItems="selectedItems1" MultiSelection="true" Hover="@hover">
    <HeaderContent>
        <MudTHeadRow IgnoreCheckbox="true">
            <MudTh>
                <MudCheckBox T="bool" Checked="IsSelectAllChecked" CheckedChanged="@Select"></MudCheckBox>
            </MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
            <MudTh>Sign</MudTh>
            <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Molar)">Mass</MudTableSortLabel></MudTh>
        </MudTHeadRow>
    </HeaderContent>
    ...
    <FooterContent>
        <MudTFootRow IgnoreCheckbox="true">
            <MudTh>
                <MudCheckBox T="bool" Checked="IsSelectAllChecked" CheckedChanged="@Select"></MudCheckBox>
            </MudTh>
            <MudTd colspan="5">Select All</MudTd>
        </MudTFootRow>
    </FooterContent>
</MudTable>

<MudText Inline="true">Selected items: @(selectedItems1==null ? "" : string.Join(", ", selectedItems1.OrderBy(x=>x.Sign).Select(x=>x.Sign)))</MudText>

@code {
    private bool hover = true;
    private HashSet<Element> selectedItems1 = new HashSet<Element>();

    private IEnumerable<Element> Elements = new List<Element>();

    private MudTable<Element> _tableRef;

    private bool IsSelectAllChecked
    {
        get
        {
            var currentPage = _tableRef.CurrentPage;
            var rowsPerPage = _tableRef.RowsPerPage;
       
            var currentPageItems = _tableRef.FilteredItems.Skip(currentPage * rowsPerPage).Take(rowsPerPage);

            if (!selectedItems1.Any(x => currentPageItems.Any(y => x == y)))
            {
                return false;
            }
            else
            {
                return true;
            }
        }
    }

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

    private void Select()
    {
        var currentPage = _tableRef.CurrentPage;
        var rowsPerPage = _tableRef.RowsPerPage;
       
        var currentPageItems = _tableRef.FilteredItems.Skip(currentPage * rowsPerPage).Take(rowsPerPage);

        if (!selectedItems1.Any(x => currentPageItems.Any(y => x == y)))
        {
            foreach(var item in currentPageItems)
            {
                selectedItems1.Add(item);
            }
        }
        else
        {
            foreach(var item in currentPageItems)
            {
                selectedItems1.Remove(item);
            }
        }
    }
}
Dimitris Maragkos0
Related