Using gridmanager functions

Sometimes you may want to use gridmanager's internal functions; examples where you might want to do this could include:

Building your own control bar for elsewhere in the page to trigger resets, saving, layout mode switches etc.

More advanced CMS integration where you might need to stop certain processes from firing, such as the preview and cleanup modes.

        var gm = jQuery("#mycanvas").gridmanager().data('gridmanager');

        $(".myexternalcontrol").on("click", function(e){
            // Example use of internal gridmanager function:
            gm.appendHTMLSelectedCols('<p>my content to append to all my selected cols</p>');

Available functions:

Function Params Returns Description
gm.activateCols() @cols - columns to activate (usually all of them selected via the colSelector class) Activates columns - looks for the passed in columns and creates editable regions, editing tools etc
gm.activateRows() @rows - rows to activate (usually all of them selected via the rowSelector class) Activates rows - looks for the passed in rows and creates editable regions, editing tools etc
gm.addCSS() @myStylesLocation (string) - path to external CSS Adds a CSS file or CSS Framework required for specific customizations
gm.addResponsiveness() @html - html contents to perform regex search on Adds missing reponsive classes to existing HTML
gm.appendHTMLSelectedCols() @html - HTML to append to selected columns Injects HTML into selected columns
gm.buttonFactory() @param btns - Array of button configurations (see options) Creates markup for dynamic buttons
gm.cleanSubstring(regex, source, replacement) @regex
Clean all occurrences of a substring
gm.cleanup() Remove all extraneous markup, i.e RTE classes and divs, editing tools, row/col buttons
gm.createCanvas() Build and append the canvas, making sure existing HTML in the user's div is wrapped. Will also trigger Responsive classes to existing markup if specified
gm.createCol() @size (integer) - width of column class (i.e 6) Creates a single column with appropriate editing tools
gm.createControls() Build and prepend the control panel
gm.createRow() Creates a single row with appropriate editing tools
gm.deactivateCols() @cols - columns to act on Opposite of activateCols
gm.deactivateRows() @rows - rows to act on Opposite of activateRows
gm.deinitCanvas() Removes all editing markup and runs cleanup
gm.generateButtonClass() @arr - array of column widths, i.e [2,3,2] Basically just turns [2,4,6] into 2-4-6
gm.generateClickHandler() @colWidths - array of column widths, i.e [2,3,2] Adds click handlers for dynamic row template buttons
gm.generateColSettings() @col - the column to append to Create the col specific settings box
gm.generateRowSettings() @row - the row to append to Create the row specific settings box
gm.getColClass() @col Get the col-md-6 class, returning 6 as well from column
gm.gridmanager() The main gridmanager function
gm.init() Main initialising function to create the canvas, controls and initialise all click handlers
gm.initCanvas() Makes rows and cols active, adds sortable attributes, triggers creation of custom controls
gm.initControls() Add click functionality to the buttons
gm.initCustomControls() Add any custom buttons configured on the data attributes
gm.initGlobalCustomControls() Add any custom buttons globally on all rows / cols
gm.isValidCallback() @callbackScp - function scope to use. 'window' for global scope
@callbackFunc - function name to call when the user clicks the custom button
Checks that a callback exists and returns it if available
gm.log() @logvar (string or object) Generic Logging function which checks for console availability & sends to console if appropriate
gm.regex() @elem
Generic regex helper
gm.reset() Shortcut to running deinit and init canvas
gm.rteControl() @action - one of init - looks for RTEs and sets an necessary options (such as CKEditor disableAutoInline=true), stop - destroys the currently loaded RTE, attach - attaches an RTE to the specified element
@element - element to attach RTE to
Starts, stops, attaches RTE editors
gm.saveremote() Runs the default jQuery POST action to options.remoteURL
gm.setupCustomBtn() @container - container element that wraps the toolbar
@btnLoc - button location: top for the upper toolbar and bottom for the lower one
@callbackScp - function scope to use. 'window' for global scope
@callbackFunc - function name to call when the user clicks the custom button
@btnObj - button object that contains properties for: tag name, title, icon class, button class and label
Configures custom button click callback function
gm.switchLayoutMode() @mode Switches the layout mode for Desktop, Tablets or Mobile Phones
gm.toolFactory() @btns