Interactive Grid Initialization Code Patterns Every Developer Should Know

The config Object Is Your Control Center

The Interactive Grid’s JavaScript Initialization Code property accepts a function that receives and returns a config object. This config controls virtually every aspect of the grid’s behavior: toolbar, column defaults, editing behavior, pagination, and event handling. Mastering a few key patterns covers most customization needs.

Pattern 1: Disable Cell-by-Cell Editing (Row Edit Mode)

function(config) {
    // Switch from cell editing to row editing
    config.defaultGridViewOptions = {
        rowHeader: { show: true },
        editMode: "row"  // Instead of default "cell"
    };
    return config;
}

Pattern 2: Set Default Values for New Rows

function(config) {
    config.defaultModelOptions = {
        defaultRecord: {
            STATUS: "DRAFT",
            CREATED_BY: apex.item("APP_USER").getValue(),
            CREATED_DATE: new Date().toISOString().split("T")[0],
            QUANTITY: 1
        }
    };
    return config;
}

Pattern 3: Disable Specific Toolbar Features

function(config) {
    // Remove chart view, group by, and pivot
    config.features = {
        chart: false,
        groupBy: false,
        pivot: false,
        aggregate: false,
        highlight: false,
        controlBreak: false
    };
    return config;
}

Pattern 4: Custom Save Behavior

function(config) {
    config.initActions = function(actions) {
        // Override the save action
        actions.lookup("save").action = function() {
            // Custom validation before save
            var model = apex.region("myGrid").widget()
                .interactiveGrid("getViews","grid").model;
            var valid = true;

            model.forEach(function(record) {
                if (model.getRecordMetadata(record).inserted &&
                    !model.getValue(record, "CUSTOMER_ID")) {
                    apex.message.alert("Customer is required on all new rows.");
                    valid = false;
                }
            });

            if (valid) {
                apex.region("myGrid").widget()
                    .interactiveGrid("getActions").invoke("save");
            }
        };
    };
    return config;
}

Pattern 5: Column-Level Configuration

function(config) {
    // Make columns read-only based on row data
    var columns = config.columns;
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].name === "UNIT_PRICE") {
            columns[i].cellTemplate = function(options) {
                // Return read-only markup for approved rows
                if (options.model.getValue(options.record, "STATUS") === "APPROVED") {
                    return '<span>' + options.value + '</span>';
                }
                return null; // Use default editable template
            };
        }
    }
    return config;
}

Debugging Tip

If your initialization code has a syntax error, the entire grid may fail to render with no visible error. Always test your JavaScript in the browser console first. Use console.log(config) at the start of your function to inspect the default config structure and understand what properties are available.