Doesn't work highlighting of the active page in the DataGrid

[8VAid8]

Describe the bug

There is a page 2 is supposed to be selected. DataGrid shows rows from a page 2, but doesn't select pagination item.

The proper variant have to looks like here:

My code:

<DataGrid 
          TItem="GroupVM"
          Data="@groupsList"
          @bind-SelectedRow="@selectedGroup"
          EditMode="@editMode"
          Editable="@editable"
          Sortable="@sortable"
          Filterable="@filterable"
          ShowPager="@showPager"
          ReadData="@OnReadData"
          TotalItems="@totalGroups"
          RowInserted="@OnRowInserted"
          RowUpdated="@OnRowUpdated"
          RowRemoved="@OnRowRemoved"
          CurrentPage="@currentPage"
          >
    <DataGridCommandColumn TItem="GroupVM" />
    <DataGridColumn TItem="GroupVM" Field="Id" Caption="#" Sortable="false" />
    <DataGridColumn TItem="GroupVM" Field="Name" Caption="Name" Editable="true" />
    <DataGridColumn TItem="GroupVM" Field="SubscriptionId" Caption="SubscriptionId" Editable="true" />
</DataGrid>

@code {
    DataGridEditMode editMode = DataGridEditMode.Form;
    bool editable = true;
    bool sortable = false;
    bool filterable = false;
    bool showPager = true;

    public GroupVM selectedGroup { get; set; }
    IEnumerable<GroupVM> groupsList;
    int totalGroups;
    int currentPage = 1;

    async Task OnReadData(DataGridReadDataEventArgs<GroupVM> e)
    {
        Console.WriteLine("OnReadData start");

        string req = $"Groups?skip={(e.Page - 1) * e.PageSize}&take={e.PageSize}";
        var response = await Http.GetJsonAsync<GroupsVM>(req);

        Console.WriteLine("finished req");

        Console.WriteLine("e.Page = " + e.Page);
        Console.WriteLine("urrent page = " + currentPage);

        groupsList = response.Groups; // an actual data for the current page
        totalGroups = (int)response.Count;
        currentPage = e.Page;

        // always call StateHasChanged!
        StateHasChanged();
    }

    async Task OnRowInserted(SavedRowItem<GroupVM, Dictionary<string, object>> e)
    {
        var group = e.Item;
        string req = $"Groups";
        group = await Http.PostJsonAsync<GroupVM>(req, group);
        e.Values["Id"] = group.Id;
        e.Values.TryAdd("Id", "dsfdsfsdf");
        e.Values.TryAdd("#", "#dsfdsfsdf");
        StateHasChanged();
    }


    async Task OnRowUpdated(SavedRowItem<GroupVM, Dictionary<string, object>> e)
    {
        var group = e.Item;

        group.Name = (string)e.Values["Name"];
        group.SubscriptionId = (string)e.Values["SubscriptionId"];
        string req = $"Groups/{group.Id}";
        await Http.PutJsonAsync<GroupVM>(req, group);
    }

    async Task OnRowRemoved(GroupVM model )
    {
        string req = $"Groups/{model.Id}";
        await Http.DeleteAsync(req);
    }
}

[kierepka]

This same problem with standard Pagination/PagintaionItem/PaginationLink buttons. Just checked everything and problem is still this same.

[kierepka]

@if (paginationShow) {
    <Pagination>

        <PaginationItem IsDisabled="@(searchPageNr <= 1)">
            <PaginationLink Page="prev" Clicked="@OnPaginationItemClick">
                @MyText.previous
            </PaginationLink>
        </PaginationItem>
        
        @for ( int i = 1; i <= lastPage; ++i ) {
            var pageName = i.ToString();
            var isSamePage = (i==searchPageNr);
            var bacgroundColor = isSamePage ? Color.Primary : Color.None;

            <PaginationItem IsDisabled="@isSamePage" IsActive="@isSamePage" Background="@bacgroundColor"  >
                <PaginationLink Page="@pageName" Clicked="@OnPaginationItemClick">
                    @pageName @isSamePage
                </PaginationLink>
            </PaginationItem>
        }        

        <PaginationItem IsDisabled="@(searchPageNr >= lastPage)">
            <PaginationLink Page="next" Clicked="@OnPaginationItemClick">
                @MyText.next
            </PaginationLink>
        </PaginationItem>
    </Pagination>
}

Is rendered:

[stsrki]

Hi sorry for not responding sooner. There are missing some image from first post so I'm not sure what is the real problem. Can you give me more information or better, can you create a simple demo project that I can test? tnx

[8VAid8]

@stsrki i've made an example - https://github.com/8VAid8/BlazoriseDataGridDemo

[stsrki]

I have tested your example and I can confirm it's not working as expected.

Then I copied an example to Blazorise demo and tried it. It's working as expected. Really strange behavior. All I can think of is that the problem can be this part:

@for ( int i = FirstVisiblePage; i <= LastVisiblePage; ++i )
{
    var pageName = i.ToString();

    <PaginationItem Disabled="@(i == CurrentPage)" Active="@(i == CurrentPage)">
        <PaginationLink Page="@pageName" Clicked="@OnPaginationItemClick">
            @pageName
        </PaginationLink>
    </PaginationItem>
}

An i variable probably should not be used, instead I need to replace it with temp variable pageName. This is the famous "feature" with loops in Blazor.

I will try to change it but since I cannot reproduce it within Blazorise I will leave this ticket open until you confirm the bug is gone. Is that OK?

[stsrki]

Hi @8VAid8 Blazorise v0.9 is out. Can you confirm this issues is gone?

PS. In case you need to upgrade: https://blazorise.com/news/release-notes/090/

[8VAid8]

Hi, @stsrki! Thank you for a new release! But, unfortunately I can't confirm the issue is gone. May be threre is something wrong with my code. I'll try to check it out.

[AjaxSantos]

Hi.
@stsrki I guess, it could be a problem with bulma solution.
In your bulma demo highlighting also does not work.
https://bulmademo.blazorise.com/tests/datagrid
In all other demos it works fine.
I hope, i could help you.

[stsrki]

@AjaxSantos Thank you! I didn't realized it is the Bulma provider. I can now confirm the bug on my side.

[Eastiling]

I'm seeing this same issue. The DataGrid pages correctly, the buttons work to change the page, but the highlighting is wrong.

All the links, including the 'active' one, have the 'disabled' class as well which seems to be the issue.

[lmalsch]

I'm facing the same issue as @Eastiling with Blazorise Bootstrap.

[Eastiling]

This isn't a proper fix by any stretch, but a liveable workaround for now:

.page-link {
    cursor: pointer;
}

.page-item.active .page-link {
    z-index: 3 !important;
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
    pointer-events: inherit !important;
    cursor: pointer !important;
}

Add the above to an active stylesheet, feel free to mess with it. I went for the simplest fix.

[lmalsch]

@Eastiling Thank you very much for sharing 👍