Looking for help creating a directive for Gridster

[Tucker Watson]

Hey all - I'm starting to learn Angular and one of my first projects involves Gridster.js and so far I've been unsuccessful at creating a working directive.  Gridster seems to automatically work off of li elements but I decided to use my own directive and try to manually add it to Gridster.  However, I can't seem to get the two-way binding or watches to work doing it this way.  I have some other ideas about how to implement it but I keep feeling like I'm approaching this the wrong way.  Any assistance would be appreciated.  

Anyways, progress so far: http://jsfiddle.net/tuckwat/KNTUG/

[Tucker Watson]

Updated with a simpler example: http://jsfiddle.net/tuckwat/fRnsD/

Notice that you can drag the blocks around and the text on the blocks don't change.  The attributes change in the DOM but don't seem to change in my model.  My guess is that Gridster does something to break the bindings?  I took a look at the init code and it seems that Gridster just wraps the HTML elements and creates a grid.  Thanks again, any help or advice would be appreciated.  I will update if I find a solution.

[Tucker Watson]

Well I finally figured out a solution, although it seems more of a hack than a solution.  After some reading and testing I figured out that DOM manipulation outside of Angular isn't detected, thus needs to manually update the model and then the scope needs to be notified by $apply().  My solution listens for anytime a widget stops dragging and then updates the x/y of every widget.  

http://jsfiddle.net/tuckwat/psnfS/

I'm guessing this should be done in a directive but I couldn't figure it out - anyone have some pointers on how to accomplish something like this?

On Wednesday, November 21, 2012 4:02:40 PM UTC-5, Tucker Watson wrote:

[Ryan Randall]

Hi Tucker,

Here's my stab at implementing a gridster directive: http://plnkr.co/edit/J2aPj0?p=preview

Cheers,

Ryan

[Tucker Watson]

Ryan, thanks so much for the excellent example!  I have been spending a lot of time trying to clean up my version but yours is much more elegant and works perfectly.  It will be a great resource.

I've figured everything out in your code except the two instances of $timeout.  It seems removing either will break it, but I can't make sense of it.  Thanks again for the help!  

[Ryan Randall]

I see $timeout like this...

$timeout(function() {

   do this once you've finished doing whatever else you're doing

});

The first instance of $timeout is applying the gridster function to the ul element. If you do that before the li elements are all set it won't work properly. Using the $timeout makes sure the li elements are all set before you gridster-ize them.

The second instance of $timeout is similar. When you click the add button, the model changes and angular changes the DOM accordingly. You need to wait for that to be done before you gridster-ize the new li element, so we just wrap the gridster-izing stuff in a $timeout.

I hope that helps...

Cheers,

Ryan

[Andy Joslin]

Hi Tucker,

Taking a look at Ryan's directive, I think the $timeouts are there so that ng-repeat has time to "take effect".

The first $timeout on line 15 happens when the directive is first linked onto the element.  At this time, the ng-repeat directive on the template has not had time to execute yet.  So the $timeout is inserted to give the ng-repeat time to "go" and generate its children.

The second $timeout on line 42 happens when the model changes. Again, this is so the ng-repeat and widget directives can go. Right when the $watch fires, all the directives haven't necessarily had time to fully compile yet.

[tche...@gmail.com]

http://jsfiddle.net/ywqgZ/

On Tuesday, May 21, 2013 4:11:02 AM UTC-4, tche...@gmail.com wrote:

this is the knockout version of gridster

http://jsfiddle.net/J3jqp/

[tche...@gmail.com]

http://jsfiddle.net/ywqgZ/1/

[Olivier Clément]

Reviving this old thread:

I am looking into doing the same thing + resizable;

I started working on it, based off of your plunk, Ryan (thanks for that great starting point). 

Code is here: https://github.com/OClement/Dashboard-PoC - Still a WIP obviously

I am currently having a problem when adding a new widget though;

I "require: '^gridster'" from the widget directive,  which work fine until I add a new widget to the model it complains it can't find 'gridster'

Anyone have an idea of what's going on?

Thanks

[Dave P.]

Thanks Ryan,

 

Your solution works great except when getting data from the service using Ajax calls.

 

I modified MainCtrl to fetch the data from the server using http call and everything else is same but it doesn't work. Is it due to timing?

 

here is the code

 

app.controller('MainCtrl', function ($scope, widgetFactory) {

 //$scope.widgets = [
    //  { ContainerRow: "1", ContainerColumn: "1", ContainerSizex: "1", ContainerSizey: "1", Title: "Widget 1" },
    //  { ContainerRow: "1", ContainerColumn: "2", ContainerSizex: "1", ContainerSizey: "1", Title: "Widget 2" }
    //]

    $scope.widgets = [];

    var successCallBack = function (data, status) {
        $scope.widgets = data;
    };

    var errorCallback = function (data, status, headers, config) {
        alert("error");
    };

    widgetFactory.getWidgets().success(successCallBack).error(errorCallback);
});

 

 

[Sarvesh Tuyenkar]

Hi Ryan,

I am facing one issue with this solution when i try to set sizex to more than 6 for a widget. The layout is messed up if i set it to 7.

{text:'Widget #1', row:1, col:1, sizex:7, sizey:1}

Regards,

Sarvesh

[A Viniston]

Hi All,

   I download this Gridster App from github.com .. But when i am Open it in browser nothing is loading... Please help me anyone i am new to this angular.... What was my Problem ...... Please help me anyone

[Joel Cox]

Olivier, I Love your example. I am trying to use this with local storage. I took out some of the external stuff like the permissions. I am trying to resize. However, It seems like The place holder does not resize. and when I resize, the console throws an error at me saying $scope does not have method sizeContent. Its coming from line 183 in 0-gridster.js

[Olivier Clément]

Hi Joel

I haven't touched that code in quite a while, but I know the Gridster.js plugin (the actual jquery plugin) was updated and support resizing out of the box

If you update your library you should be able to ditch the jquery-UI resizable code and all relative code in the directives

If you still struggle with this after that, let me know 

Hope this help

Cheers

Envoyé de mon iPhone

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/EyuNUBFR2H4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.