on resizestop - data-gs-height not updated ?

[karam12]

Hi !

I am not able to get the current height of the element when I'm in the .on('resizestop') event.
When I make : element.getAttribute('data-gs-height'); It gives me always the old value, not the new one.

Here is my code :
https://jsfiddle.net/Karam/wzzm2oua/6/

Thank you for your help.

[DennisPallett]

We are running into the same problems. It seems the "snapping to the grid" action happens after the resizestop event.

[karam12]

I found a solution, but I don't like it !

I calculated the height by looking into the source of gridstack.js

var grid = $(this).data('gridstack');
var height  = (1.5 * grid.opts.cellHeight - 1) 

But it would be greate if this probleme could be corrected.

[radiolips]

This is updated when jQueryUI tells the code the resize is finished - and the animation is even part of jQueryUI. I tried a couple things before to get this to work properly, to no avail. I'll take another look, but if anyone has any ideas, let me know. I've thought about hooking into the animation completion events, but without full information (that is, the animation could change), this is unreliable.

[karam12]

Can't you create another event that is triggered after you change the elements sizes ? (like the 'change' event, one for resize and another one for move)

[Poohyhu]

change event on data-gs-height and data-gs-width should be solve the problem, just make sure to call the event only once if both are changed

[MysticSmeg]

Hey people,
😃

Does anyone know if there is a fix, work-around or anything planned to resolve this issue please?

I'm working on a ASP.NET (Core) MVC dashboard project, calling C# controller code to write "x,y" (dragstop) & "width,height" (resizestop) settings back to an SQL table to persist the dashboard state. The code works fine, but the values returned to the methods are not updated until after the events (as stated here).

Unfortunately, the work-around mentioned here (calculating from opts) only works for height, since "opts" does not contain a 'cellWidth' or 'x','y'.

Any help greatly appreciated!!! 😉

[Poohyhu]

Hi, you can calculate the grid item size from css height/width.

[MysticSmeg]

Hey Poohyhu, Thanks for getting back to me. I guessed there might be a way. Do you have an example that will point me in the right direction? "A Google link speaks a thousand words" Can this method also be used to get the x and y from css? I'm guessing not. Thanks :D

[Poohyhu]

Hi,
You can try jQuery css() function to get the '.grid-stack-item' width and height.
when you create the grid you can specify the cellheight (height of a row), so have the height divider
cellHeight.
to calculate the cols with is a bit harder, you need the grid container width (in pixels) and you have to divide by grid cols first ....
anyway see below

var gridOptions =
{
cellHeight: 32,
width: 12
}
$('#grid-container').on('resizestop', function(event)
{
item = event.target; // the grid item (element)
cssWidth = parseInt($(item).css('width'), 10);
cssHeight = parseInt($(item).css('height'), 10);

itemHeight = Math.round(cssHeight / gridOptions.cellHeight);
itemWidth = Math.round(cssWidth/(parseInt($(this).css('width'), 10) / gridOptions.width));
}

[MysticSmeg]

Hey, thanks for the example Poohyhu.
😃

I understand what you mean now, and I've implemented something similar.

Unfortunately, the height calculation needs some work (will post if I get it working) as the value is out (bit high) and this work-around doesn't address the x,y issue; it's a pretty cool package otherwise 👍.

I'm hoping you manage to resolve this in a future release of GridStack?

Thanks again

---- update ----

Have found var newHeight = Math.floor(cssHeight / gridOptions.cellHeight) - 1; works better.

[Poohyhu]

Hi,

not so nice, but workable solution for dragstop and resizestop
o = event.target;
setTimeout(function(){
x = $(o).attr('data-gs-x');
}, 50);

you can get any live data, just wait for a few millisecond 😃
(of course you have to put the code in the right event handler, and with the right attribute)

otherwise, for x and y you can use the jQuery offset().top and offset().left to calculate the right grid x y

regards

[MysticSmeg]

You're pretty awesome! Nice work, thanks 😄

The complete work-around (which works for now) is below (for others):

    <script type="text/javascript">

        // default ready function
        $(function () {
            var options = {
                animate: true,
                alwaysShowResizeHandle: true
            };
            $('.grid-stack').gridstack(options);

            new function () {
                this.grid = $('.grid-stack').data('gridstack');

// more code doing stuff here

                $('.grid-stack').on('resizestop', function(event, ui) {
                    var element = event.target;
                    var id = element.children[1].children[0].id;  //allows indexing of multiple items
                    var selectedItem = $('.grid-stack-item')[id - 1];
                    setTimeout(function () {
                        var newWidth = $(selectedItem).attr('data-gs-width');
                        var newHeight = $(selectedItem).attr('data-gs-height');
                        resizeInstrument(id, newWidth, newHeight);
                    }, 50);
                });

                $('.grid-stack').on('dragstop', function (event, ui) {
                    var grid = this;
                    var element = event.target;
                    var id = element.children[1].children[0].id; //allows indexing of multiple items
                    var selectedItem = $('.grid-stack-item')[id - 1];
                    setTimeout(function () {
                        var newX = $(selectedItem).attr('data-gs-x');
                        var newY = $(selectedItem).attr('data-gs-y');
                        moveInstrument(id, newX, newY);
                    }, 50);
                });

// even more code doing stuff here

        });
    </script>

...and example of called function code, which hooks into ASP.NET / MVC / C# code (located in site.js):

function resizeInstrument(id, width, height) {
    var csvData = id + "," + width + "," + height;

    $.ajax({
        //POST type response with text (csv) parameter
        type: "POST",
        datatype: "text/plain",
        //url is comprised of Controller name/method name/ + any query data (parameters)
        url: "/Home/ResizeInstrument/?data=" + csvData,
        contentType: "application/csv; charset=utf-8",
        cache: false,
        success: function (data) {
            // id of div to contain results
            $('.grid-stack-item-content#instrument' + id).html(data);
        }
    });
}

Where did I leave my refactoring tool box...?

[Poohyhu]

welcome,

but you don't need the children thing. the event.target is the selected object
so the $(element).attr() should be enough

regards

[MysticSmeg]

I'm rendering charts (using high-charts) into affected <divs>, and since the data for the charts is coming from a database table (as merged script), I need to look up specific data each time the user interacts with a specific <div>. The id comes from the primary key in the table, and is written into the id of the <div> containing the chart during this.loadGrid(). The chart <div>is a child to the grid-stack-container <div>.

I had to dig about a bit to locate the id, and $(element).attr('id'); returns undefined in this case. But I understand what you're saying; there is likely a better way to do it. Thanks.