KendoUI Grid + AngularJS

[mihaichiritescu]

Hi, 

 

I am trying to implement a generic table widget (using KendoUI) having the data binding done with AngularJS.

The table widget would look something like this in the HTML file (fiddle here: http://jsfiddle.net/mihaichiritescu/ULN36/35/):

    <div ng:controller="Tester">
        <gridview>
            <div data-ng-repeat="man in people">
                <gridviewcolumn datasource="name" man="man"></gridviewcolumn>
                <gridviewcolumn datasource="age" man="man"></gridviewcolumn>               
            </div>            
        </gridview>
    </div> 

Basically the table would have an ng-repeat that would repeat through the list of objects and for each object, using the 'gridviewcolumn', I would add cells under each row.

This way I am trying to replicate the structure of the KendoUI table, which is something like this:

​​<div id="grid">

<div class="k-grid-header"></div>
<div class="k-grid-content">
    <table>
        <colgroup></colgroup>
        <tbody>
            <tr>
                <td></td>
                <td></td>                
            </tr>          
        </tbody>
    </table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

So, using the ng-repeat, for each object I will dinamically add a new row and for each column I will add a new cell on the last added row. Unfortunately I am not able to manipulate the ng-repeat directive in such a way that I will properly replicate the internal structure of the KendoUI grid view. I am ending up with an internal table structure looking like this:

​<div id="grid">
<div data-ng-repeat="man in people" class="ng-scope">
    <div datamember="name" man="man" class="ng-binding">name1</div>
    <div datamember="age" man="man" class="ng-binding">21</div>
</div>
<div data-ng-repeat="man in people" class="ng-scope">
    <div datamember="name" man="man" class="ng-binding">name2</div>
    <div datamember="age" man="man" class="ng-binding">25</div>
</div>
<div class="k-grid-header"></div>
<div class="k-grid-content">
    <table>
        <colgroup></colgroup>
        <tbody>
            <tr>
                <td></td>
                <td></td>                
            </tr>          
        </tbody>
    </table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

I would like to somehow place the content of the ng-repeat directive in the body of the table, not above it. Does anyone know hot to accomplish this?

I could use jquery to place the content into the cells but I would still have to remove/hide the ng-repeat directives and their content from above the table body, which I do not know how to do without some ugly hacks. 

Also I am not necessarilly bound to KendoUI gridview but it seems better looking than others and it probably has similar internal structure to other table widgets, so I would encounter the same issue with other widgets too.

Do you guys have some ideas/advices on how to implement a generic table using AngularJS? I did search for some tables done with AngularJS but I did not find something that would have good functionality and looks. 

Regards, 

Paul

[Todor Pavlov]

You can use a template inside of the directive as show here i.e. put the ng-repeat on the <tr> element of the table

There was also several directives for Datatables which is similar to the Kendo-UI table

[Tim Sweet]

We are working on an angular native grid that is suitable for large data (100K+ rows) using virtualization with divs instead of a tr/td 

https://github.com/Crash8308/ng-grid

And lots of features coming very soon.

Chees

[Marcus]

Hi Tim,

Very nice grid tool !

I've been playing with the "$scope.gridOptions = { data : $scope.myData }" method to load data, but I can't find a way to use data that I pull off a MongoLab database.

I get this error: "If auto-generating columns, "data" cannot be of null or undefined type!"

I used Pawel's "promise" db access tools to my MongoLab databases, and perhaps what is happening is that on loading the page, I have not filled myData up with anything.

Is there a way to inject data at different times into myData, so that the grid changes accordingly ?

Thanks,

Marcus

[Marcus]

Hi Tim,

I'm seeing that you are updating and improving your grid tool every day this week.

I was hoping you might reply to this :

Is there a way to inject data at different times into myData, so that the grid changes accordingly ?

I load frequent data (and changes) from a mongolab source, but I can't get this data into the grid.  If I place a {{dataFromMongo}} anywhere in my HTML, it displays whatever is coming in (once the "promise" is completed).  But, this same data I cannot get it inside your grid.

Any chance you have a solution figured out for this ?

Marcus

[Tim Sweet]

Sorry for the late reply.

If you constantly change the pointer to the array you pass in it won't update. If you use splice, it should update. I have yet to figure out why angular won't track the changes in arrays of you reassign the pointer.

does that help?

[Marcus]

Hi Tim,

Thanks for getting back. I tried your splice idea, using just a couple of short arrays, and got a similar error as when I tried it with a MongoLab data source:

   Error: $apply already in progress

Not sure if this helps in your developments.  Your grid idea is great, and it would be nice if we can us it in our projects.

Thanks,

Marcus

[Timothy Sweet]

I just made another commit, it should fix the datasource not updating when changed issue.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
-Tim Sweet

[Marcus]

Hi Tim,

I downloaded and tested.

If I put in $scope.myData.splice(0, 2); on a button to test after the grid displays, it works, but I must use the original $scope.myData

If I change any item in the array, or load new data into the same array, and click on the button, it breaks and does nothing.

The splice function simply chops down the list to a smaller and smaller array.

Not sure what else I can do.

Cheers,

Marcus

[Timothy Sweet]

I have been experimenting with it and it appears to be an angular quirk/bug when saying $scope.myArray= newArray

If you push/pop/slice it works perfectly fine.

What I am doing to make reassigning data work is saying this:

    $scope.changeData = function(){

        $scope.myData.length = 0;

        var newData = [NEW ARRAY DATA];

        angular.forEach(newData, function(item, i){

            $scope.myData.push(item);

        });

    };

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
-Tim Sweet

[Timothy Sweet]

again, to be clear, it is because there is a problem with angular not firing watch functions that are listening to arrays once they get reassigned.

--
-Tim Sweet

[Tim Sweet]

renamed my account so it's now under https://github.com/timothyswt/ng-grid

[Marcus]

Hi Tim,

Your solution did just the right thing:

As I'm using Pawel's MongoLab HTTP solution that uses promise to get at my databases, I had trouble figuring out why I was not updating into your Grid.

Finally I figured out that what comes out of a promise is more than just the result:

   $scope.myResult == { $$v : [ NEW ARRAY DATA ] }

To get rid of the $$v you can use  $scope.myResult.$$v ==  [ NEW ARRAY DATA ]

       $scope.updateData = function(){

            $scope.myData.length = 0;

            angular.forEach($scope.ciudades.$$v, function(item, i){

                $scope.myData.push(item);

            });

        }

The $scope.ciudades was the promised result of Ciudades.query() to access the MongoLab database.

----

Now my only problem is to figure out how to get a callback from promise, so that I can have my screen automatically update...

   ...basically I would need a callback that triggers  $scope.updateData each time new data comes in from MongoLab.

 (Pawel -- any ideas ?)

Big thanks for your help and for pushing you Grid forward !

Cheers,

Marcus

P.S.  one interesting thing -- if you only use the Grid on your template, it will not update, even if I put a button and click to run $scope.updateData.  I figured this out and had to add a non-visible  {{ciudades.name}}   onto my HTML page, so that Angular would update the screen.

[Peter Bacon Darwin]

$scope.myResult.then(function(data) { ... do stuff with the data after it arrives ...});

--

[Pawel Kozlowski]

Hi!

On Sun, Nov 4, 2012 at 12:41 PM, Marcus <bo...@befund.com> wrote:

> The $scope.ciudades was the promised result of Ciudades.query() to access the MongoLab database.
>

> Now my only problem is to figure out how to get a callback from promise, so that I can have my screen automatically update...
>
> ...basically I would need a callback that triggers $scope.updateData each time new data comes in from MongoLab.

You can use callbacks to register work to be done when data arrive,
exactly like with $http:

Ciudades.query(function(data){
//do something with data here
});

Or you can register a callback on promise using .then as Peter suggested.

Cheers,
Pawel

[Marcus]

Hi Peter, Pawel, Tim,

Your help is much appreciated.  I think several can read into this thread and find out a lot about how AngularJS works with queries, promises and js apps like Grid.

I tried the following, which looks for data in MongoLab :

        $scope.ciudades.then(function(data) {

            $scope.updateData(data)

        })

This calls:

        $scope.updateData = function(data){

            $scope.myData.length = 0

            angular.forEach(data, function(item, i){

                $scope.myData.push(item)

            })

        }

 $scope.myData receives the new data that comes in from MongoLab, and this fills up the Grid each time automatically.

Please note:  at first I had data.$$v, as in my previous routines, but I found out that data is the actual JSON result that comes from MongoLab.

Good news is that this now works great !

Thanks :-)

Marcus

[Marcus]

Hi Tim,

Just a quick comment for you to consider...

I tried placing 2 Grids on one sheet, and found that this doesn't work:

<div ng-controller="MyCtrl">

        <div ng-grid="gridOptionsCiudad"></div>

        <div ng-grid="gridOptionsPais"></div>

</div>

I am using the same controller within one <div> for both, so perhaps the $scope variables are conflicting (I've isolated and checked my variables).

What happens after the MongoLab promise delivers the data is that both Grids re-size to their number of records, but only the 2nd Grid shows its own data.  The first Grid is left with a blank box where data should have been displayed.  If I click on the check-box of the 1st Grids, it selects the records of the 2nd Grid.

Probably I should have different Controllers for each, but I just you might have a solution to isolate each Grids. 

Cheers,

Marcus

[Marcus]

Hi Tim,

>> Probably I should have different Controllers for each, but I just you might have a solution to isolate each Grids. 

No go...  I tried:

      <div ng-grid="gridOptionsCiudad" ng-controller="MyCtrl"></div>

           <br>

     <div ng-grid="gridOptionsPais" ng-controller="MyCtrl2"></div>

Same result as above.

Cheers,

Marcus

[Timothy Sweet]

Yeah, I have been thinking of how we initially designed the app and we can change some stuff to allow multiple grids to work. Basically the rowService and sortService are singletons since it's an app service. For now try specifying ng-app="ngGrid" for each grid and separating the controllers. Each grid gets a new child scope from your controller but its because of the services which are app level singletons. We will change it before release.

Thanks for the feedback! Its really useful because you never know how people will use your stuff until they do. :)

--

[Marcus]

Hi Tim,

Thanks to you for developing these tools.  I look inside and learn how AngularJS is used, and then get to learn from the experts :-)

I've been convinced that the best route is to do things in "native" AngularJS whenever possible, without reaching into DOM-based widgets and extras. If this is possible, apps will get tighter, smaller and work more efficiently.  Too many JS apps are becoming bloated and slow, hard to debug, etc.

I anticipate your Grid concept could become an easy thing to drop into form-based apps, such as creating an invoice or filling out work orders. We're designing a large factory/logistics/sales system that I want to do as a pure on-line experience -- no OS dependencies, works with tablets, iPad, iPhone, etc., multiple databases of legacy (MySQL) and modern (Mongodb), documents and images (lots of photos are required for logistics), deep linking, and then hooks into GoogleMaps, weather, overlay SVG, etc.

But, this has to be completely away from compiled apps that run on a single OS (or even hybrid cross-OS). We've spent buckets of money for years paying off OS-based tools and upgrades, and yet we're never able to keep up with those changes.  I think AngularJS and some related tools is the future.

Looking forward to seeing more evolution with your Grid.

Marcus

[Timothy Sweet]

in the latest commit you should be able to have mutiple grids on the same page. Take a look at the example here:

http://timothyswt.github.com/ng-grid/examples/

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
-Tim Sweet

[Timothy Sweet]

I have made a major update to the grid. Details are on the page but here is the gist:

if you pass in the string name of the scope variable instead of the object itself on the grid options then you can set the array. You can set a new flag called watchDataItems on the options to "true" and i will watch for all object changes and update the grid. However, that option adversely affects performance quite a bit on large datasets (100K+ rows). on smaller datasets it's not as noticeable so it's up to your judgement on how you want to do updates.

--
-Tim Sweet

[Tim Sweet]

We are on version 1.1 and we now have column hide/show support as well as a bunch of little additional features and performance enhancements. 

http://timothyswt.github.com/ng-grid/examples/

Cheers,

Tim Sweet

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
-Tim Sweet

--
-Tim Sweet

[Tim Sweet]

https://github.com/timothyswt/ng-grid

Version 1.2 We now support server-side paging, grouping aggregates and hide/show/reordering columns.

Cheers,

Tim sweet

[Tim Sweet]

version 1.8 released: 

http://angular-ui.github.com/ng-grid/

[David Santos]

I am currently working on a way to integrate kendo ui and angular.  

https://github.com/RupertAvery/angular-kendo

Beware, the code (especially with kendoGrid) is buggy.  ng-gird would be a better choice, but if you want to stick with kendo, directives are the way to go.  

There's still a lot of work to be done on managing the data between angular and kendo however.  Since kendo manages it's data by itself, and doesn't provide some needed event trapping, angular + kendo is going to be a challenge...

[Matt Madhavan]

HI Tim,
You seem to be the primary developer of the NgGrid. And you seem to very passionate about your product.

Could you please answer some of my questions? I really need some assurances/Questions answered before I commit my team to NgGrid.

Thanks
Matt'M

version 1.8 released: 

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
-Tim Sweet

--
-Tim Sweet

[Timothy Sweet]

Hey Matt, 

I apologize for the slow replies. I recently moved states and switched jobs so I haven't been as active on the ng-grid development as I want to. I should have more time here soon-ish (once things settle down @home and @work) to take care of the looming issues. Jon and Brian are also on the team and Jon has been actively trying to take care of the issues until I can get back on track. I would really love to bring a couple other people on board as primary developers of the grid to help maintain, test, and support it if they have the time. So, if you know anyone that would like to contribute, I would gladly add them as contributors to the repo.

Cheers,

Tim Sweet

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/Bvgn5AbL1qk/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/groups/opt_out.
 
 

--
-Tim Sweet

[Matt Madhavan]

Hi Tim,
I appreciate your reply and I do understand that you are busy.

I would love to volunteer to help but I am afraid I may not be the right guy. My background is JEE architecture. Kind of new to the whole JS world and even after 7 months in JS some of the JS syntax drives me nuts.

But if you point me to where I should start I can definitely start looking into it . But I would like to have the steps to follow.

And I have opened few more issues on ngGrid. When you have some time please review it.

Thanks
Matt Madhavan