How to display and filter Breeze entities in ng-grid?

Question

I have an ng-grid with the following configuration:

vm.gridOptions = {
    data: 'vm.users',
    showFilter: true,
    columnDefs: [
        { field: 'firstName' },
        { field: 'lastName' },
        { field: 'email' }
    ]
};

The vm.users property is populated with the results from a Breeze query:

var query = breeze.EntityQuery.from('Users')
    .where('firstName', 'startsWith', 'K');

return manager
    .executeQuery(query)
    .then(querySucceeded, _queryFailed);

This basically works. It shows up in the grid in the way I would expect, but when I try to filter, no matter what I type, everything gets filtered out. I was able to track this down to this section of code in ng-grid:

var searchEntireRow = function(condition, item, fieldMap){
    var result;
    for (var prop in item) {
        if (item.hasOwnProperty(prop)) { // <-- Works if I get rid of this condition
            var c = fieldMap[prop.toLowerCase()];
            if (!c) {
                continue;
            }

            ...

The problem is that when ng-grid is searching an entity ( item ), the necessary fields exist in item , but they fail the hasOwnProperty check. It works if I get rid of that check, and it might even be safe, because it still checks to make sure the prop exists in the fieldMap ... but I hesitate to make such a change.

It works fine if I do a projection, rather than an entity query, but I don't want to lose the caching that I get with entity queries (I guess I could do an entity query followed by a projection query against the cache...). Is there a better way to get breeze entities filterable in an ng-grid, or is this a bug?

I'm using ng-grid 2.0.11 and angular 1.2.15.

Answer 1

If you're model library is "backingStore" (as it is for an Angular app), none of your entity properties are "own" properties. They are all implemented as ES5 properties on the prototype of the entity type's constructor.

If you really wanted to restrict your filter seeing the immediate data properties (not inherited data properties) of the object, you could write this:

var proto = Object.getPrototypeOf(obj);
for (var key in obj) {if (obj.hasOwnProperty(key)) /* your logic here */;}

Understand that this picks up a few Breeze properties as well such as entityAspect and won't detect properties of a "base class" if you have any entity inheritance in your model.

Now that you know why, you can decide how to proceed.

Be aware that every Breeze entity type has circularities. At a minimum, the x.entityAspect.entity points back to x . That's a problem for some 3rd party controls; I do not know if it is a problem for the ng-Grid.