Interactive GRID | Custom Progress on Loading Data

October 7, 2021Posted inAPEX, IG, Interactive Grid

Referred from John’s cookbook sample app.

  • Execute when Page Loads
// Add the progress indicator. An alternative would be to add this to a page template.
$("#t_Header .t-Header-logo").append('<div id="progress" class="progress-bar stripes"><span></span></div>');
  • Interactive Grid
  • Advanced – Static ID – emp
  • Attributes
  • JavaScript Initialzation Code
Copy Code
function(config) {
    config.saveLoadingIndicator = function() {
        $("#progress").addClass("is-active");

        return function () {
            $("#progress").removeClass("is-active");
        };
    };

    // shows how additional options can be passed to the makeLoadingIndicator function
    config.defaultGridViewOptions = {
        progressOptions: {
            color: "#f9bfd6"
        }
    };

    config.defaultModelOptions = {
        makeLoadingIndicator: function( views, options ) {
            return function() {
                var i, color = "#34c2e3";

                for (i = 0; i < options.length; i++) {
                    if (options[i].color) {
                        color = options[i].color;
                    }
                }

                $("#progress span").css("background-color", color);
                $("#progress").addClass("is-active");

                return function () {
                    $("#progress").removeClass("is-active");
                };
            };
        }
    };

    return config;
}
Tags: