gridmanager.js : Function Reference

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.

<script>
    $(document).ready(function(){ 
        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>');
        });
    });
</script>

Available functions:

Function	Params	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 @source @replacement	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 @index @match	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

gridmanager.js Structural editor for rows and columns in popular CSS frameworks

Function Reference

Using gridmanager functions

Available functions: