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


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


Step 1: Create Interactive Grid Report.

Step 2: Do the below attributes setting.


Type => Scroll
Show Total Row Count => NO


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.

    border-radius: 5px;
    background:      #0571CC;
    cursor: pointer;



Related Posts:


Popular posts from this blog

Highlight the cell of Interactive Report based on Search Criteria in Oracle APEX

Querying Data From Flat Files in Oracle

Number of Tables by The Number of Rows in Oracle Database

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Highlight Data That Meet Certain Criteria in Oracle APEX Report

Return a Validation Message using JavaScript if the Oracle Application Express Item is Empty

Remove X (Close Mark) from Oracle APEX Modal Dialog

Display User Rating Icons Dynamically in Oracle APEX Report

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Find Where Specific Table or View is Used in Oracle Database