New version

[black-byte]

Is there any upcomming new version of this ? On the issues are such kind of information.
for example: #84

[neokoenig]

Sorry, just haven't had the time to have another crack at it. 1.3 works well enough for most of the things I do, so it's not been a priority.

[black-byte]

Is there maybe any chance for destroy function ?

[neokoenig]

Does gm.destroy() not work?

[black-byte]

var gm = $('.my-grid-mng-test').gridmanager().data('gridmanager');
gm.destroy(); 

Uncaught TypeError: gm.destroy is not a function
    at turnOffGridManager (froala.html:140)
    at HTMLDocument.<anonymous> (froala.html:135)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

In the source code jquery.gridmanager.js i don't see also this function.

[neokoenig]

hmm, I think I must have tried this later (been so long since I've touched the code).

Does this work?

 /**
         * Destroy instance, save created HTML in original container
         * @method destroy
         * @returns null
         */
        gm.destroy = function(){
          if(gm.status){ 
            // Remove controls
            $("#" + gm.options.controlId).remove();
            // Remove content out of canvas
            gm.deinitCanvas();
            gm.$el.html($("#" + gm.options.canvasId).html());
            // Remove canvas
            $("#" + gm.options.canvasId).remove();
          }
        };

Either way, the principle is there I think - get the content, destroy the containing element

[black-byte]

Well it doesn't work, it removes almost everything.
But here are the codes:
Html before init:

<div style="margin: 0 15px;">
	<div class="row fr-inner">
		<div class="col-xs-12 col-md-8 fr-inner">.col-xs-12 .col-md-8</div>
		<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
	</div>
	<div class="row fr-inner">
		<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
		<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
		<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
	</div>
	<div class="row fr-inner">
		<div class="col-xs-6 fr-inner">.col-xs-6</div>
		<div class="col-xs-6 fr-inner">.col-xs-6</div>
	</div>
</div>

after init:

<div class="clearfix" id="gm-controls">
	<div class="row">
		<div class="col-md-12">
			<div id="gm-addnew" class="btn-group pull-left"></div>
			<div class="btn-group pull-right">
				<button class="btn btn-xs btn-primary gm-edit-mode" title="Edit Source Code" type="button"><span class="fa fa-code"></span></button>
				<button class="btn btn-xs btn-primary gm-preview" title="Preview" type="button"><span class="fa fa-eye"></span></button>
				<div class="dropdown pull-left gm-layout-mode">
					<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="fa fa-desktop" title="Desktop"></span></button>

					<ul class="dropdown-menu" role="menu">
						<li><a data-width="auto" title="Desktop"><span class="fa fa-desktop"></span> Desktop</a></li>
						<li><a data-width="768" title="Tablet"><span class="fa fa-tablet"></span> Tablet</a></li>
						<li><a data-width="640" title="Phone"><span class="fa fa-mobile-phone"></span> Phone</a></li>
					</ul>
				</div>
				<button class="btn  btn-xs  btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>

				<ul class="dropdown-menu" role="menu">
					<li><a class="gm-save" href="#" title="Save"><span class="fa fa-save"></span> Save</a></li>
					<li><a class="gm-resetgrid" href="#" title="Reset Grid"><span class="fa fa-trash-o"></span> Reset</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="ui-sortable" id="gm-canvas">
	<div style="margin: 0 15px;">
		<div class="row fr-inner gm-editing ui-sortable">
			<div class="gm-tools clearfix"><a class="gm-moveRow pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="gm-addColumn pull-left  " title="New Column"><span class="fa fa-plus"></span>&nbsp;</a> <a class="pull-right gm-rowSettings" title="Row Settings"><span class="fa fa-cog"></span>&nbsp;</a> </div>
			<div class="col-xs-12-clsstmp col-md-8 fr-inner col-sm-8-clsstmp column gm-editing ui-sortable">
				<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span>&nbsp;</a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span>&nbsp;</a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span>&nbsp;</a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span>&nbsp;</a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span>&nbsp;</a> </div>
				<!--gm-editable-region-->
				<div class="gm-editable-region gm-content-draggable">
					<div class="gm-controls-element">
						<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
						<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
					</div>
					<div class="gm-content">.col-xs-12 .col-md-8</div>
				</div>
				<!--/gm-editable-region-->
				<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span>&nbsp;</a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
			</div>
			<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
				<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span>&nbsp;</a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span>&nbsp;</a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span>&nbsp;</a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span>&nbsp;</a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span>&nbsp;</a> </div>
				<!--gm-editable-region-->
				<div class="gm-editable-region gm-content-draggable">
					<div class="gm-controls-element">
						<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
						<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
					</div>
					<div class="gm-content">.col-xs-6 .col-md-4</div>
				</div>
				<!--/gm-editable-region-->
				<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span>&nbsp;</a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
			</div>
			<div class="gm-tools clearfix"><a class="pull-right gm-removeRow" title="Remove row"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
		</div>
		<div class="row fr-inner gm-editing ui-sortable">
			<div class="gm-tools clearfix"><a class="gm-moveRow pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="gm-addColumn pull-left  " title="New Column"><span class="fa fa-plus"></span>&nbsp;</a> <a class="pull-right gm-rowSettings" title="Row Settings"><span class="fa fa-cog"></span>&nbsp;</a> </div>
			<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
				<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span>&nbsp;</a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span>&nbsp;</a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span>&nbsp;</a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span>&nbsp;</a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span>&nbsp;</a> </div>
				<!--gm-editable-region-->
				<div class="gm-editable-region gm-content-draggable">
					<div class="gm-controls-element">
						<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
						<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
					</div>
					<div class="gm-content">.col-xs-6 .col-md-4</div>
				</div>
				<!--/gm-editable-region-->
				<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span>&nbsp;</a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
			</div>
			<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
				<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span>&nbsp;</a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span>&nbsp;</a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span>&nbsp;</a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span>&nbsp;</a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span>&nbsp;</a> </div>
				<!--gm-editable-region-->
				<div class="gm-editable-region gm-content-draggable">
					<div class="gm-controls-element">
						<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
						<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
					</div>
					<div class="gm-content">.col-xs-6 .col-md-4</div>
				</div>
				<!--/gm-editable-region-->
				<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span>&nbsp;</a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
			</div>
			<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
				<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span>&nbsp;</a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span>&nbsp;</a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span>&nbsp;</a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span>&nbsp;</a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span>&nbsp;</a> </div>
				<!--gm-editable-region-->
				<div class="gm-editable-region gm-content-draggable">
					<div class="gm-controls-element">
						<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
						<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
					</div>
					<div class="gm-content">.col-xs-6 .col-md-4</div>
				</div>
				<!--/gm-editable-region-->
				<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span>&nbsp;</a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
			</div>
			<div class="gm-tools clearfix"><a class="pull-right gm-removeRow" title="Remove row"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
		</div>
		<div class="row fr-inner gm-editing ui-sortable">
			<div class="gm-tools clearfix"><a class="gm-moveRow pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="gm-addColumn pull-left  " title="New Column"><span class="fa fa-plus"></span>&nbsp;</a> <a class="pull-right gm-rowSettings" title="Row Settings"><span class="fa fa-cog"></span>&nbsp;</a> </div>
			<div class="col-xs-6-clsstmp fr-inner col-md-6 col-sm-6-clsstmp column gm-editing ui-sortable">
				<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span>&nbsp;</a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span>&nbsp;</a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span>&nbsp;</a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span>&nbsp;</a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span>&nbsp;</a> </div>
				<!--gm-editable-region-->
				<div class="gm-editable-region gm-content-draggable">
					<div class="gm-controls-element">
						<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
						<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
					</div>
					<div class="gm-content">.col-xs-6</div>
				</div>
				<!--/gm-editable-region-->
				<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span>&nbsp;</a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
			</div>
			<div class="col-xs-6-clsstmp fr-inner col-md-6 col-sm-6-clsstmp column gm-editing ui-sortable">
				<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span>&nbsp;</a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span>&nbsp;</a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span>&nbsp;</a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span>&nbsp;</a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span>&nbsp;</a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span>&nbsp;</a> </div>
				<!--gm-editable-region-->
				<div class="gm-editable-region gm-content-draggable">
					<div class="gm-controls-element">
						<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
						<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
					</div>
					<div class="gm-content">.col-xs-6</div>
				</div>
				<!--/gm-editable-region-->
				<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span>&nbsp;</a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
			</div>
			<div class="gm-tools clearfix"><a class="pull-right gm-removeRow" title="Remove row"><span class="fa fa-trash-o"></span>&nbsp;</a> </div>
		</div>
	</div>
</div>

after destroy:

<div class="clearfix" id="gm-controls">
	<div class="row">
		<div class="col-md-12 col-xs-12 col-sm-12 column">
			<!--gm-editable-region-->
			<div id="gm-addnew" class="btn-group pull-left" style="display: none;"></div>
			<div class="btn-group pull-right">
				<button class="btn btn-xs btn-primary gm-edit-mode" title="Edit Source Code" type="button"><span class="fa fa-code"></span></button>
				<button class="btn btn-xs btn-primary gm-preview" title="Preview" type="button"><span class="fa fa-eye"></span></button>
				<div class="dropdown pull-left gm-layout-mode">
					<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="fa fa-desktop" title="Desktop"></span></button>

					<ul class="dropdown-menu" role="menu">
						<li><a data-width="auto" title="Desktop"><span class="fa fa-desktop"></span> Desktop</a></li>
						<li><a data-width="768" title="Tablet"><span class="fa fa-tablet"></span> Tablet</a></li>
						<li><a data-width="640" title="Phone"><span class="fa fa-mobile-phone"></span> Phone</a></li>
					</ul>
				</div>
				<button class="btn  btn-xs  btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>

				<ul class="dropdown-menu" role="menu">
					<li><a class="gm-save" href="#" title="Save"><span class="fa fa-save"></span> Save</a></li>
					<li><a class="gm-resetgrid" href="#" title="Reset Grid"><span class="fa fa-trash-o"></span> Reset</a></li>
				</ul>
			</div>
			<!--/gm-editable-region-->
		</div>
	</div>
</div>


```

[neokoenig]

Try replacing

 // Remove controls
            $("#" + gm.options.controlId).remove();

with

 // Remove controls
            $("#gm-controls").remove();

[black-byte]

Same result

Final output:

<div class="clearfix" id="gm-controls">
	<div class="row">
		<div class="col-md-12 col-xs-12 col-sm-12 column">
			<!--gm-editable-region-->
			<div id="gm-addnew" class="btn-group pull-left" style="display: none;"></div>
			<div class="btn-group pull-right">
				<button class="btn btn-xs btn-primary gm-edit-mode" title="Edit Source Code" type="button"><span class="fa fa-code"></span></button>
				<button class="btn btn-xs btn-primary gm-preview" title="Preview" type="button"><span class="fa fa-eye"></span></button>
				<div class="dropdown pull-left gm-layout-mode">
					<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="fa fa-desktop" title="Desktop"></span></button>

					<ul class="dropdown-menu" role="menu">
						<li><a data-width="auto" title="Desktop"><span class="fa fa-desktop"></span> Desktop</a></li>
						<li><a data-width="768" title="Tablet"><span class="fa fa-tablet"></span> Tablet</a></li>
						<li><a data-width="640" title="Phone"><span class="fa fa-mobile-phone"></span> Phone</a></li>
					</ul>
				</div>
				<button class="btn  btn-xs  btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>

				<ul class="dropdown-menu" role="menu">
					<li><a class="gm-save" href="#" title="Save"><span class="fa fa-save"></span> Save</a></li>
					<li><a class="gm-resetgrid" href="#" title="Reset Grid"><span class="fa fa-trash-o"></span> Reset</a></li>
				</ul>
			</div>
			<!--/gm-editable-region-->
		</div>
	</div>
</div>

[black-byte]

Currently i have changed the destroy function to:

gm.destroy = function(){
          if(gm.status){ 
            // Remove controls
            $("#" + gm.options.controlId).remove();
            // Remove content out of canvas ( grid manager )
            gm.deinitCanvas();
            gm.$el.html($("#" + gm.options.canvasId).html());
            // Remove canvas - right corner
	   gm.$el.find("#" + gm.options.controlId).remove();					
	  // remove main container for gridmanager
	  gm.$el.find('#' + gm.options.canvasId).contents().unwrap();		
	  // removes gmTags all bootstrap divs are inside divs with that class
	  var gmTags = gm.$el.find(".gm-editable-region");
	  gmTags.contents().unwrap();
			
	  // remove comments that gridmanager created
	  var html = gm.$el.html();	
	  html = html.replace(new RegExp( "<!--" + gm.options.gmEditRegion + "-->", "g"),'');
          html = html.replace(new RegExp( "<!--/" + gm.options.gmEditRegion + "-->", "g"),'');
	  gm.$el.html(html);		
          }
        };

It works like a harm on cleaning the html code but when i initialize the grid manager again the controls for it are creating one more time per each init. So if i destroy grid manager one time and recreate it the controls will be create twice for each row / col. If i do it 4 times then they will be 4 inits per each control. Still working on it. Can you provide some help on that ?