Load more row option in Oracle APEX 18.2 Interactive Grid (IG)

Objective:

To bring partial data refresh concept to improve the query (data retrieval) performance in Interactive Grid.

Solution:

Step 1: Create Interactive Grid Report.

Step 2: Do the below attributes setting.

Pagination:

Type => Scroll
Show Total Row Count => NO

Heading:

Fixed To => Region
Fixed Report Height => {as per your requirement}

Step 3: Add the below JS in the JS section of the IG attributes.

function(config) {
    config.defaultGridViewOptions = {
        rowHeader: "sequence",
        pagination: {
            loadMore: true
        }
    };
    config.defaultIconViewOptions = {
        collectionClasses: "t-Cards t-Cards--compact t-Cards--displayIcons u-colors t-Cards--desc-2ln"
    };
    return config; // don't forget to return this!
}

Step 4: Add the below HTML in the footer section of the IG region. (To indicate user)

<span style="color:block;font-weight:normal">System fetches 40 records. To see more go to the bottom and click </span><span style="color:black;font-weight:bold"> Load More Rows </span>

Step 5: Add the below CSS in the inline section of the page header.

.a-GV-loadMoreButton

{

    border-radius: 5px;

    color:#DFF8FF;

    background:      #0571CC;

    cursor: pointer;

}

Output:

Related Posts:

• Select list pagination in Oracle APEX 18.2 InteractiveGrid (IG)