CODEWITHSUNDEEP
angularjsdrag-and-dropdraggablegridster
chitcharonko
chitcharonko

Reputation: 331

Angular Gridster : Resize Widget

Hi is there a way where I can resize the widget using angular-gridster. I know gridster (not angular version) has a function for it like this:

gridster.resize_widget(widget,6,6)

I don't know how to do it using angular-gridster

Upvotes: 1

Views: 2373

Answers (2)

dmunk
dmunk

Reputation: 31

It depends on what you are trying to do. If you simply want them to start at a certain size, then you need to change the gridsterOpts. If you want to resize it manually using the mouse, then you need to make sure that the gridsterOpts re sizable field has the property "enabled" set to true. If you are running a function that automatically resizes the widget, then that's another situation.

Basically, the size of the widgets is determined by gridster by looking at the widget's sizeX and sizeY properties, which are always saved within the widget object. Whenever you manually resize the widget, the sizeX and sizeY properties of that widget update automatically. A widget may start with sizeX = 2 and sizeY = 3, but as soon as you resize it to make it larger, these two properties change.

The way that angular knows how to display these widgets (size, position, etc) is by looping through an array that contains the widget objects and reading all of their properties. If you want to reset the size of a widget within a function, you need to be able to identify which widget you want to resize, and then reset its sizeX and sizeY properties. As soon as you do so the changes should be recognized and the widget should change.

Upvotes: 1

vovchisko
vovchisko

Reputation: 2229

I think you have some controller where you declared your widgets. Right?

You no need any method. Angular handle it for you. If you change some of your widgets inside your angular controller $scope.your_widgets - all your changes will be in template as well.

//so your widgets probably looks like this in your controller.

$scope.standardItems = [
  { sizeX: 2, sizeY: 1, row: 0, col: 0 },
  { sizeX: 2, sizeY: 2, row: 0, col: 2 },
  { sizeX: 1, sizeY: 1, row: 0, col: 4 },
  { sizeX: 1, sizeY: 1, row: 0, col: 5 },
  { sizeX: 2, sizeY: 1, row: 1, col: 0 },
  { sizeX: 1, sizeY: 1, row: 1, col: 4 },
  { sizeX: 1, sizeY: 2, row: 1, col: 5 },
  { sizeX: 1, sizeY: 1, row: 2, col: 0 },
  { sizeX: 2, sizeY: 1, row: 2, col: 1 },
  { sizeX: 1, sizeY: 1, row: 2, col: 3 },
  { sizeX: 1, sizeY: 1, row: 2, col: 4 }
];

//and where ever you want (in controller I mean) - you can do like this:

$scope.standardItemems[3].sizeX = 6;
$scope.standardItemems[3].sizeY = 6;
<div gridster>
    <ul>
        <li gridster-item="item" ng-repeat="item in standardItems"></li>
    </ul>
</div>

So if you just want to change widget size in some super specific way - would be nice to add bit more details. Cuz angular sometimes a bit tricky with simple things.

Upvotes: 0

Related Questions