Update add_item function

[skworden]

It would be nice if we could set min and max params as well as an ID when adding an element dynamically.

    GridStack.prototype.add_widget = function(el, x, y, width, height, auto_position, min_width, max_width, min_height, max_height, id) {
        el = $(el);
        if (typeof id != 'undefined') el.attr('id', id);
        if (typeof x != 'undefined') el.attr('data-gs-x', x);
        if (typeof y != 'undefined') el.attr('data-gs-y', y);
        if (typeof width != 'undefined') el.attr('data-gs-width', width);
        if (typeof height != 'undefined') el.attr('data-gs-height', height);
        if (typeof min_width != 'undefined') el.attr('data-gs-min-width', min_width);
        if (typeof max_width != 'undefined') el.attr('data-gs-max-width', max_width);
        if (typeof min_height != 'undefined') el.attr('data-gs-min-height', min_height);
        if (typeof max_height != 'undefined') el.attr('data-gs-max-height', max_height);
        if (typeof auto_position != 'undefined') el.attr('data-gs-auto-position', auto_position ? 'yes' : null);
        this.container.append(el);
        this._prepare_element(el);
        this._update_container_height();

        return el;
    };

//Example usage

grid.add_widget(el, 0, 0, 4, 1, true,3,12,1,1, 'example_id');


The ID would help for many reasons however, my use is being able to remove an element that was dynamically created and also when drawing the grid back out from the db.

[h-nazzal]

for better performance it should be

GridStack.prototype.add_widget = function(el, x, y, width, height, auto_position, min_width, max_width, min_height, max_height, id) {
    el = $(el);
    if (typeof x != 'undefined') el.attr('data-gs-x', x);
    if (typeof y != 'undefined') el.attr('data-gs-y', y);
    if (typeof width != 'undefined') el.attr('data-gs-width', width);
    if (typeof height != 'undefined') el.attr('data-gs-height', height);
    if (typeof auto_position != 'undefined') el.attr('data-gs-auto-position', auto_position ? 'yes' : null);

    // check for a 7th argument if found then perform the rest of  assignments
    if (id != 'undefined' ){
        el.attr('id', id);
        if (typeof min_width != 'undefined') el.attr('data-gs-min-width', min_width);
        if (typeof max_width != 'undefined') el.attr('data-gs-max-width', max_width);
        if (typeof min_height != 'undefined') el.attr('data-gs-min-height', min_height);
        if (typeof max_height != 'undefined') el.attr('data-gs-max-height', max_height);

    }


    this.container.append(el);
    this._prepare_element(el);
    this._update_container_height();

    return el;
};

[skworden]

agreed @h-nazzal . I just kept it how they had it originally.

[radiolips]

This code has now been implemented. You may pass minWidth, maxWidth, minHeight, maxHeight, and id to addWidget now. Please note that gridstack will not write the id value onto the element id. Instead, it will use data-gs-id, as is common to this library.