I'm using gridstack.js to display a "layout" to users so they can build an ad page, and while I'm able to get the width and height of the cell after it's resized, as soon as the resize is done, the ability to resize the cell again is lost. Here is the HTML code I have:

<div class="row">
  <div class="col-sm-12">
    <div class="editable">
      <div class="grid-stack">
        <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content">2 x 2</div>
        </div>
        <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="3" data-gs-height="4">
          <div class="grid-stack-item-content">3 x 4</div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the JavaScript:

$('.grid-stack').gridstack({
  width: 16,
  height: 16,
  cell_height: 60,
  vertical_margin: 20,
  animate: true,
  always_show_resize_handle: true
});

$('.grid-stack-item').on('resizestop', function() {
  var node = $(this).data('_gridstack_node');

  if(typeof node == undefined) {
      return;
  }

  $(this).html('<div class="grid-stack-item-content ui-draggable-handle">' + node.width + ' x ' + node.height + '</div>');
});

I was originally getting the width and height by just calling $(this).data('gsWidth') and $(this).data('gsHeight') but it would only retain the original attributes, and not the updated ones (even though the HTML code would change).

I want the user to see the new W x H value after (or while) they resize a "cell", but it's not working.

Here's a JSFiddle example so you can see what's going on (make sure your browser window is big enough):

/

I'm using gridstack.js to display a "layout" to users so they can build an ad page, and while I'm able to get the width and height of the cell after it's resized, as soon as the resize is done, the ability to resize the cell again is lost. Here is the HTML code I have:

<div class="row">
  <div class="col-sm-12">
    <div class="editable">
      <div class="grid-stack">
        <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content">2 x 2</div>
        </div>
        <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="3" data-gs-height="4">
          <div class="grid-stack-item-content">3 x 4</div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the JavaScript:

$('.grid-stack').gridstack({
  width: 16,
  height: 16,
  cell_height: 60,
  vertical_margin: 20,
  animate: true,
  always_show_resize_handle: true
});

$('.grid-stack-item').on('resizestop', function() {
  var node = $(this).data('_gridstack_node');

  if(typeof node == undefined) {
      return;
  }

  $(this).html('<div class="grid-stack-item-content ui-draggable-handle">' + node.width + ' x ' + node.height + '</div>');
});

I was originally getting the width and height by just calling $(this).data('gsWidth') and $(this).data('gsHeight') but it would only retain the original attributes, and not the updated ones (even though the HTML code would change).

I want the user to see the new W x H value after (or while) they resize a "cell", but it's not working.

Here's a JSFiddle example so you can see what's going on (make sure your browser window is big enough):

http://jsfiddle/divspace/zsstqhee/

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Oct 7, 2015 at 22:37 Kyle Anderson asked Oct 7, 2015 at 22:32 Kyle AndersonKyle Anderson 3,22911 gold badge1515 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I've been playing with Gridstack.js for a while now, and decided to update this question with the answer. Here is the updated JavaScript:

$('.grid-stack').gridstack({
  width: 16,
  height: 16,
  cell_height: 60,
  vertical_margin: 20,
  animate: true,
  always_show_resize_handle: true
});

var grid = $('.grid-stack').data('gridstack');

$('.grid-stack-item').on('resizestop', function() {
  var gridCell = $(this),
      node = $(this).data('_gridstack_node');

  if(typeof node == undefined) {
    return;
  }

  grid.update(gridCell, node.x, node.y, node.width, node.height);

  $(this).find('.grid-stack-item-content').text(node.width + ' x ' + node.height);
});

And a working JSFiddle example.