Pagination UI does not work.

[jho-md]

Describe the bug
When viewing a collection, the UI for pagination does not work. Going to the next page works, however going backwards does not. And when you navigate to another collection and back to the original collection, the pagination bar disappears completely.

Steps To Reproduce
Steps to reproduce the behavior:

1. Register a collection and populate it with enough items to get a 2nd page.
2. Click the next page and see it works as expected.
3. Go back to the first page and see nothing changes.
4. Navigate to another collection and back to the first one, and see that the pagination UI disappears.

Expected behavior
Pagination to work as expected.

Screenshots

Environment (please complete the following information):

• Server OS: Windows
• Browser: Chrome
• Umbraco Version: 15.2.1
• Product Version: 15.1.1

---

This item has been added to our backlog AB#51290

[nathanwoulfe]

@jho-md FYI, I have a PR pending review which resolves this issue.

[andrejd22]

Any updates on this issue?

After deeper investigation, it seems that on first load, the endpoint /umbraco/uibuilder/management/api/v1/entity/find/ fires much faster than /umbraco/uibuilder/management/api/v1/collection/{collection}. Because of this, the second endpoint doesn’t get a chance to apply all the necessary settings from the first one.

Here’s the payload of /umbraco/uibuilder/management/api/v1/entity/find/:

{
  "pageSize": 10,
  "skip": 0,
  "take": 10,
  "collectionAlias": "{collection}",
  "parentId": null
}

However, the /umbraco/uibuilder/management/api/v1/collection/{collection} endpoint has the following list configuration:

...
"listView": {
  "pageSize": 20,
  "defaultOrderBy": "CreatedOn",
  "defaultOrderDirection": "desc",
  "nameHeading": "Name",
  ...
}
...

When you start interacting with the UI - like pressing pagination or sorting - these settings are eventually applied. But by then, pagination is already rendered incorrectly, which causes it to behave badly.

[acoumb]

Hi @jho-md , @andrejd22 ,

This has been fixed with version 15.1.3 of UI Builder.

Thanks,
Adrian

[andrejd22]

Hi @acoumb ,

Thank you for resolving the issue. The data is now loading correctly, with sorting applied and the page size set properly (the table view shows the correct number of items per page). However, paging is still broken on the initial load—it renders based on the default page size of 10 items per page, regardless of the configured value.

It should be reopened

[andrejd22]

@acoumb This is what the payload looks like:

The page size is set to 20, but after refreshing the page 5–10 times, the pagination only renders correctly once.

[jho-md]

@acoumb Pagination still appears broken after upgrading. I have a collection of entities that takes up a little more than 1 page. However, the bottom of the screen shows that there are 3 pages. When I go to page 2, page 2 still includes items from page 1. And when I click on page 3 (which should not exist), it shows the same entities as page 2. After this, navigating back to page 2 or page 1 doesn't do anything. I need to refresh in order for pagination to work again.

[andrejd22]

@acoumb When navigating through the repository tree, pagination usually works as expected. However, if I refresh the browser (Chrome using F5 or Ctrl+F5), pagination breaks until I either apply a filter or navigate to a different repository and then return to the original one. Hopefully, this helps you reproduce the issue more easily.

[andrejd22]

@acoumb When navigating through the repository tree, pagination usually works as expected. However, if I refresh the browser (Chrome using F5 or Ctrl+F5), pagination breaks until I either apply a filter or navigate to a different repository and then return to the original one. Hopefully, this helps you reproduce the issue more easily.

@acoumb after deployment to the live environment, this issue remains persistent and continues to significantly impact usability. The previous comment referred only to testing done on a local machine.

[acoumb]

Hi @jho-md , @andrejd22 ,

I've released an RC version - 15.1.6-rc1 to our NuGet feed here: https://www.myget.org/F/umbraconightly/api/v3/index.json.

Could you install this version and check again?

Thanks,
Adrian

[jho-md]

@acoumb Tested on the latest version, and pagination doesn't work. It lists all of the entities on the first page, yet still shows up as having multiple pages. When I click on page 2 or page 3, nothing happens, since all of the entities are listed in page 1.

[acoumb]

@jho-md would you be able to share a screenshot/video sample with me?
And a configuration?

[jho-md]

@acoumb
Video sample: https://drive.google.com/file/d/1jnb46stGExBmUloB2pv9qoSGZmpQqk8f/view?usp=sharing
Configuration: SupplyConfiguration.txt

[andrejd22]

@acoumb I tested it again, and the issue still persists. The behavior is the same on my local machine: when navigating through the repository tree, pagination generally works as expected. However, if I refresh the browser (in Chrome, using F5 or Ctrl+F5), pagination stops working. It only starts working again after I either apply a filter or switch to a different repository and then return to the original one.

[acoumb]

@jho-md , @andrejd22 I've released 15.1.6-rc2 version on the Nightly feed, could you try again with this version?

[andrejd22]

@acoumb It seems to be working fine for me. Paging and data loading function correctly, whether I change the page, set any page size, or refresh the page.

[acoumb]

@jho-md if this works for you as well, I will prepare the release of the patch version.

[jho-md]

@acoumb I am still not getting proper functionality on the latest release candidate. I tried setting page size to 5, and am still seeing all of the results on the first page. Hitting any of the other page buttons does not do anything, since all of the results were already on page 1.

[nathanwoulfe]

@jho-md in your config screenshot, what is the method AddAagiCollection and what is it doing? I'm assuming it's a custom extension (given Aagi matches your namespace), so curious if you've tested registering a collection using the default UI Builder methods to verify if the issue is in the product or caused by the customisation.

I've just now verified the below works correctly. I think this is what you're expecting - a tree folder with a child node displaying the collection? Pagination works as expected when registered this way. In this example, my AddCollection should be equivalent to your AddAagiCollection:

    public static SectionTreeConfigBuilder AddPersonCollection(this SectionTreeConfigBuilder builder)    
        => builder
            .AddFolder("test folder", "icon-folder", folderConfig => folderConfig
                .AddCollection<PersonDto>(x => x.Id, "Person", "People", "A person folder", "icon-umb-users", "icon-umb-users", collectionConfig => collectionConfig
                    .ListView(listViewConfig =>
                    {
                        listViewConfig.AddField(p => p.JobTitle).SetHeading("Job Title");
                        listViewConfig.AddField(p => p.Email);
                        listViewConfig.SetPageSize(4);
                   })));

[jho-md]

@nathanwoulfe You are correct that I am expecting a tree folder with a child node displaying the collection.
The AddAagiCollection extension generalizes the AddCollection method and uses it directly.

internal static TreeFolderConfigBuilder AddAagiCollection<TEntityType>(
    this TreeFolderConfigBuilder treeContainerConfigBuilder,
    string icon,
    Action<TreeCollectionConfigBuilder<TEntityType>> collectionConfigDelegate,
    string? singleIcon = null) 
        where TEntityType : BaseEntity { 
    ArgumentNullException.ThrowIfNull(treeContainerConfigBuilder);

    var localizationPrefix = typeof(TEntityType).Name.ToFirstCharacterLowerCase();

    return treeContainerConfigBuilder.AddCollection<TEntityType>(
        x => x.Id,
        $"#{localizationPrefix}_singular",
        $"#{localizationPrefix}_plural",
        $"#{localizationPrefix}_description",
        singleIcon ?? icon,
        icon,
        collectionConfiguration => {
            collectionConfiguration.SetAagiCollectionDefaults($"{localizationPrefix}s");
            collectionConfigDelegate.Invoke(collectionConfiguration);
        });
}

The tree folder calls the AddSupplyItemConfiguration method.

internal static SectionTreeConfigBuilder AddSupplyDirectoryTree(this SectionTreeConfigBuilder sectionTreeConfig) {
    ArgumentNullException.ThrowIfNull(sectionTreeConfig);

    return sectionTreeConfig.AddFolder("#clientDirectory_supplyDirectory", "icon-shipping-box", folderConfig => {
        folderConfig.SetOrdinal(6)
                    .AddSupplyItemConfiguration()
                    .AddSupplyCategoryConfiguration();
    });
}

For reference, here is the SetAagiCollectionDefaults extension.

 internal static CollectionConfigBuilder<TBuilder, TChildEntityType> SetAagiCollectionDefaults<TBuilder, TChildEntityType>(
     this CollectionConfigBuilder<TBuilder, TChildEntityType> collectionConfiguration,
     string alias)
          where TBuilder : CollectionConfigBuilder<TBuilder, TChildEntityType>
          where TChildEntityType: BaseEntity {

     collectionConfiguration.SetRepositoryType<EntityFrameworkRepository<TChildEntityType>>();
     collectionConfiguration.SetAlias(alias);
     collectionConfiguration.SetDeletedProperty(x => x.SoftDelete);
     collectionConfiguration.SetDateCreatedProperty(x => x.CreatedDate);
     collectionConfiguration.SetDateModifiedProperty(x => x.ModifiedDate);

     return collectionConfiguration;
 }

From what I can see, my code should be doing the same as your code, just with more configurations.

[nathanwoulfe]

@jho-md have you tried registering a minimal test case? I will do the opposite - implement your extensions and try to replicate.

Also interested in the response data from /umbraco/uibuilder/management/api/v1/configuration, in particular the collections object corresponding to your entity. Please confirm that the listView.pageSize property is returned with the configured page size.

While we're inspecting requests/responses, the request to /umbraco/uibuilder/management/api/v1/entity/find should include the pageSize property, and match the value from the configuration request. Please confirm this one too.

EDIT => configuration via extension methods works as expected in my testing.

[jho-md]

@nathanwoulfe Inspecting the requests/responses uncovered the issue which was a misconfiguration on our side. Fixed the issue and pagination works as expected now.

Thank you and I apologize for the inconvenience!

[nathanwoulfe]

@jho-md that's fantastic to hear - I was fast running out of suggestions 🚀

[andrejd22]

@nathanwoulfe @acoumb you have closed this issue, but when will version 15.1.6 with full functionality be released?

[acoumb]

@andrejd22 15.1.6 is now available on NuGet.