Removing and adding a widget that contains a gridster

[poagester]

I have custom code for the draggable.stop function which checks bounds of the rows and removes a widget that is in row 2 and then adds it to the next available column of row 1. One of these is a nested gridster and when the widgets are moved within the nested gridster they get removed. I thought namespace: '#id' was supposed to keep them separate, it doesn't seem to. Can someone instruct me on how to keep them separate?

[dustmoo]

Could you setup a jsfiddle or show us how you are initializing your gridsters? Also could you show us the code that scopes the remove?

[poagester]

                $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster({ 
                    widget_margins: [1, 1],
                    widget_base_dimensions: [500,274],
                    avoid_overlapped_widgets: true,
                    extra_rows: 0,
                    extra_cols: 0,
                    serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, sizex: wgd.size_x, sizey: wgd.size_y, id: wgd.el[0].id }; },
                    draggable: {
                        stop: function(event,ui){
                            for(i = 0; i < 3; i++){
                                if($('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').serialize()[i].row == 2){
                                    var new_col = 3;
                                    var regEx = new RegExp('player-revert');
                                    if(!regEx.test($("#" + $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').serialize()[0].id).attr('class'))){
                                        new_col -= $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').serialize()[0].col - 1;
                                    }
                                    if(!regEx.test($("#" + $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').serialize()[1].id).attr('class'))){
                                        new_col -= $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').serialize()[1].col - 1;
                                    }
                                    if(!regEx.test($("#" + $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').serialize()[2].id).attr('class'))){
                                        new_col -= $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').serialize()[2].col - 1;
                                    }
                                    new_col++;
                                    var widget = "<li id=\"" + $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').$widgets[i].id + "\" class=\"new\">";
                                    widget += $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').$widgets[i].innerHTML;
                                    widget += "</li>";
                                    alert(widget);
                                    $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').remove_widget($('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').$widgets[i]);
                                    $('#grid3 ul#grid3_ul:not("#acctStatList")').gridster().data('gridster').add_widget(widget,1,1,new_col,1);
                                    break;
                                }
                            }
                        }
                    },
                    namespace: '#grid3'
                });

[dustmoo]

Namespace currently only applies to the generation of stylesheets so that the generated stylesheet doesn't conflict with your other styles.

I would try initializing the grids separately. And use different base class names for the widgets.

You can scope the draggable widgets but using a different items option for each draggable:

draggable: {
        items: ".widget_class"
    }

[poagester]

Okay, I already initialize each grid separately. So I should change each li in my ul to have a different class name specific to the items? For example

$("#grid2 ul#grid2_ul").gridster({
    widget_margins: [0, 0],
    widget_base_dimensions: [142, 24],
    /*namespace: '#grid2'*/
    draggable: {
        items: ".widget_class2"
    }
});
$("#grid1 ul#acctStatList").gridster({
    widget_margins: [0, 1],
    widget_base_dimensions: [170, 26],
    /*namespace: '#grid1'*/
    draggable: {
        items: ".widget_class1"
    }
});
<div id="grid1">
    <ul id="grid1_ul">
        <li class="widget_class1">text</li>
        <li class="widget_class1">
            <div id="grid2">
                <ul id="grid2_ul">
                    <li class="widget_class2">text</li>
                </ul>
            </div>
        </li>
    </ul>
</div>

[dustmoo]

I would try that first, though it hurt my brain a little bit to see widget_class2 under grid1 and widget_class1 under grid2. But I would try that first.

Good luck.

On Thu, May 16, 2013 at 8:33 AM, poagester notifications@github.com wrote:

Okay, I already initialize each grid separately. So I should change each li in my ul to have a different class name specific to the items? For example

$("#grid2 ul#grid2_ul").gridster({ widget_margins: [0, 0], widget_base_dimensions: [142, 24], /namespace: '#grid2'/ items: ".widget_class1" }); $("#grid1 ul#acctStatList").gridster({ widget_margins: [0, 1], widget_base_dimensions: [170, 26], /namespace: '#grid1'/ items: ".widget_class2" });

• text
• • text

— Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/175#issuecomment-18008837 .

[poagester]

Sorry about the misnaming, I've updated to prevent any future brain aneurysms. doing this removes the ability to rearrange the inner grid... Do you know of anywhere I can get an example of nested grids with this api? Or, a different way to approach it with this one?

[poagester]

I have figured this out!

$("#grid2 ul#grid2_ul").gridster({
    widget_margins: [0, 0],
    widget_base_dimensions: [142, 24],
    draggable: {
        items: ".widget_class2"
    }
});
$("#grid1 ul#acctStatList").gridster({
    widget_margins: [0, 1],
    widget_base_dimensions: [170, 26]
    }
});
<div id="grid1">
    <ul id="grid1_ul">
        <li>text</li>
        <li>
            <div id="grid2">
                <ul id="grid2_ul">
                    <li class="widget_class2">text</li>
                </ul>
            </div>
        </li>
    </ul>
</div>

This is allowing nested grids and not effecting the parent or the child when you drag them around after removing the child grid and re-adding it to a new element in the parent with the draggable stop code above!

Thanks Dustin, I appreciate it!

Dustin