Hi,
I'm trying to set external filter to true and use a different control to filter data sent from server. The idea is to integrate ng-grid to a pre-existing application. I've tried many variations and have created the following plunker http://plnkr.co/edit/Cb3rpFyvKiAm0lLSEUvZ?p=preview.
TIA
John

When you click on the checkox to select or unselect all rows, selection change events (beforeSelectionChange or afterSelectionChange) are not triggered.

At least, it would be great to have an event triggered when this checkbox is clicked.

Would it be possible to support passing cell / header / row templates as separate html partials rather than putting html directly into the property in the options object?

It feels a bit messy writing html directly in the controller, maybe that's just me though.

Example:

$scope.gridOptions = {
        data: self.myData,
        rowTemplate: 'partials/clients/row-template.html'
 };

Column virtualization for wide grids much like we are doign for row virtualization

we should be able to remove all dependency on jquery.

My grids are being styled with crazy large heights. How is this generated?

http://plnkr.co/edit/i7OsfW?p=preview

Enhance grid to allow drag re-ordering of rows

Not really a ng-grid issue, but useful to track none the less.
Chrome profiler tree is attached, derez calls take up 90%+ time.

Nice work! Impressive in terms of speed of development. In terms of where things will go here is a personal wish-list of some down-the-road "advanced" enhancements that I think would really make this standout.

-Group by with aggregates
-Fixed columns for those wide grids
-Column virtualization for wide grids
-Cell navigation and cell selection
-Editable fields or something along those lines
-Dynamic individual row/cell styling based on data
-Variable row heights

I imagine some of these would probably effect performance severely.
Thanks for sharing the awesome work so far!

When using Drag & Drop grouping once you drag a header to group by then close it you get this error:

Cannot read property '$$phase' of undefined

Plunker: http://plnkr.co/edit/CWFojN

When my page is loading I don't have any data available. Just requested it from cloud so I need to fill grid after data received.

I tried to "refresh" grid data by using $scope.$apply but without success... :(

Did I missed something?

It doesn't appear that the headerClass is being applied in either the master or the layout branches.

I'm applying it to my headers in this plunker but they aren't being added.
http://plnkr.co/edit/i7OsfW

...

in grid options with

groups:['name','surname']

i have the error undefined has no method toString

Adding the ability to filter on columns. Needs to be independent of any column rows.

Need to be able to register plugins and have them be easily added modules.

Hi Tim
I think I found a bug which I can consistently create using http://plnkr.co/edit/zBbFOTsf1hvTXjK0NzU2?p=preview

1. press column header dropdown. select name group option
2. close dropdown box
3. expand jacob and scroll down
4. expand nephi and dont collapse jacob
5. scroll down and display will get very large on what I think is the last row of jacob
6. can cause the same behavior with just one group expanded
   John

When clicked an item in First grid then that item is moved into Second grid.
When I use ng-grid v1.4.0, the routine below works fine.
But now 1.4.1, ng-grid cannot recognize the data changes immediately.

Did I wrong something?

$scope.assignedUsers = []; //assgined user list


$scope.registeredUsers = []; //all user list

$scope.assignedUserGridOptions = 
{ 
    data: 'assignedUsers',
    columnDefs: 
    [
        {
            field: 'userId',
            displayName: 'id'
        },
        {
            field: 'userName',
            displayName: 'name'
        },
        {
            field: 'enabled',
            displayName: 'available'
        }
    ],
    rowTemplate: '<div ng-repeat="col in visibleColumns()" ng-click="remove(row.entity.userId)" class="ngCell col{{$index}} {{col.cellClass}}" ng-cell></div>',
    footerVisible: false,
    multiSelect: false,
    showColumnMenu: false,
    canSelectRows: false, 
    displaySelectionCheckbox: false,
    showFilter: true
};


$scope.registeredUserGridOptions = 
{ 
    data: 'registeredUsers',
    columnDefs: 
    [
        {
            field: 'userId',
            displayName: 'id'
        },
        {
            field: 'userName',
            displayName: 'name'
        },
        {
            field: 'enabled',
            displayName: 'available'
        }
    ],
    rowTemplate: '<div ng-repeat="col in visibleColumns()" ng-click="insert(row.entity.userId)" class="ngCell col{{$index}} {{col.cellClass}}" ng-cell></div>',
    footerVisible: false,
    multiSelect: false,
    showColumnMenu: false,
    canSelectRows: false, 
    displaySelectionCheckbox: false,
    showFilter: true
};





//remove clicked item from "assigned" user list and add the item to "all" user list
$scope.remove = function(userId)
{
    for(var i in $scope.assignedUsers)
    {
        if($scope.assignedUsers[i].userId == userId)
        {
            $scope.registeredUsers.push($scope.assignedUsers.splice(i, 1)[0]);
            break;
        }
    }

    //If skip cords below, ng-grid cannot recognize data changes.
    $scope.assignedUsers = JSON.parse(JSON.stringify( $scope.assignedUsers ));
    $scope.registeredUsers = JSON.parse(JSON.stringify( $scope.registeredUsers ));
};

//remove clicked item from "all" user list and add the item to "assigned" user list
$scope.insert = function(userId)
{
    for(var i in $scope.registeredUsers)
    {
        if($scope.registeredUsers[i].userId == userId)
        {
            $scope.assignedUsers.push($scope.registeredUsers.splice(i, 1)[0]);
            break;
        }
    }

    //If skip cords below, ng-grid cannot recognize data changes.
    $scope.assignedUsers = JSON.parse(JSON.stringify( $scope.assignedUsers ));
    $scope.registeredUsers = JSON.parse(JSON.stringify( $scope.registeredUsers ));
};

Thanks for the awesome plugin! I have a few questions...

First, I'm struggling to add new columns to the grid and redraw it completely. My query can return and number of columns and I can't figure out how to dynamically add them. Tried columndefs as well with no luck. Is this supported?

Also, is there a way to dynamically size the height of ng-grid as more rows are addided? I was thinking of calculating it in javascript and setting the height but thought I'd ask before trying to implement. Thanks!

I'm using a grid in a partial and if I put the ng-controller in the partial I get an undefined gridDim error. I'm assuming that's because the data isn't there yet. However, if I out the ng-controller in the parent html file it works when the partial is loaded. Any ideas on how to solve this? I can see myself doing this quite a bit.

Error:
TypeError: Cannot set property 'gridDim' of undefined
at pre (https://raw.github.com/timothyswt/ng-grid/master/ng-grid-1.3.2.debug.js:1917:37)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4208:13)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834:14)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837:12)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4216:24)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834:14)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3746:30
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:12851:43
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:8663:11
at wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:6623:59)

The idea is that there could be columns that are not a part of the scrolling viewport.

I want to download some column information data from server and then render ng-grid columns.

but i encountered error like this..

'TypeError: Cannot set property 'gridDim' of undefined...................'

is there a solution?

//ajax function..
$scope.accessData('POST', defaultPath + 'url...../select.action', { "permission": {} },
function(data)
{
    if( data.permissions )
    {
        var columnDefines =
        [
            {
                field: 'viewResourceId',
                displayName: 'ID'
            },
            {
                field: 'viewResourceName',
                displayName: 'Name'
            }
        ];


        for( var i in data.permissions )
        {
            var columnElement =
            {
                field: data.permissions[i].permissionId,
                displayName: data.permissions[i].description,
                cellTemplate: '<input type="checkbox">'
            }

            columnDefines.push(columnElement);
        }

        $scope.gridOptions = 
        { 
            data: 'resourceList',
            columnDefs: columnDefines,
            footerVisible: false,
            multiSelect: false,
            showColumnMenu: false,
            canSelectRows: false, 
            displaySelectionCheckbox: false
        };

Trying to apply a custom rowTemplate and it's not overriding the default.

template is on line 77: http://plnkr.co/edit/CWFojN

I may be misunderstanding the gridTempate vs rowTemplates vs cellTemplates. In ngGrid.js the ng.defaultGridTemplate is where the div with the ngRow class is stored. In ng.defaultRowTemplate the class on that div is ngCell and on the div in ng.defaultCellTemplate is the class ngCellText.

It seems like there off a bit and the ng.defaultGridTemplate is also holding what should be in ng.defaultRowTemplate.

At any rate, the myCustomClass I've added to my customRowTemplate doesn't seem to be showing up in the grid anywhere. Am I doing something wrong is there an issue?

When cells are populated with a date string like 7/25/2012 when you try to click the header to sort by this column you get the following error:

ReferenceError: dateRE is not defined

See this plunker and sort by date column: http://plnkr.co/edit/CWFojN

Hi!

I have columns which contains the html code and I need to show value as not escaped html. How I can use "html" filter in cell?

Thank you for this awesome plugin!

There is a non printable unicode character at ng-grid.css:1:1

Please fix it by running:
iconv -f utf8 -t ascii -c ng-grid.css > ng-grid-ascii.css
rm ng-grid.css
mv ng-grid-ascii.css ng-grid.css

Hi,
I'm trying to replace my tables with ng-grid and get the error below (console.log).

1. I matched your example to look like my data and it works fine.
   $scope.myContacts = {'Contacts':[{name: "Moroni", age: 50},
   {name: "Tiancum", age: 43},
   {name: "Jacob", age: 27},
   {name: "Nephi", age: 29},
   {name: "Enos", age: 34}]};
   $scope.gridOptions = { data: 'myContacts.Contacts' };

2. My socket.io fails
   var socket = io.connect();
   socket.emit('getalerts', {});
   socket.on('init', function (obj) {
   $scope.contacts = obj;
   $scope.$apply();
   console.log('$scope.Contacts ',$scope.contacts);
   $scope.gridOptions2 = { data: 'contacts.Contacts' };

3. The console shows very similar objects so I thought I'd be good to go.
   TIA
   John

console.log
$scope.myContacts
Object {Contacts: Array[5]}
Contacts: Array[5]
proto: Object
controllers.js:790
TypeError: Cannot set property 'gridDim' of undefined
at pre (http://localhost:8083/js/ng-grid.debug.js:1936:41)
at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:4226:13)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:3851:14)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:3854:12)
at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:3763:30)
at update (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:13890:11)
at Object.Scope.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:8090:28)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:7250:26
at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:6650:59)
at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:6650:59)

Just had a look at your exemples.
Great stuff overall, works really great on Chrome but there seems to be some issues with FF 16 and how the grid is displayed

Need to add updated documentation and examples for the 1.0 release

Either through a context menu or some other mechanism we should be able to hide or show columns and reorder them in place.

With Angular 1.0.3, when there are groups with an odd number of items (1, 3, 5, etc.) and the group is not the last group, expanding the group will display only the last group.

Removing:

ng-class-odd="row.alternatingRowClass()" ng-class-even="row.alternatingRowClass()"

from ng.defaultGridTemplate fixes the problem, but also removes alternating row formatting.

Hi,
I'm trying to replace my tables with ng-grid and get the error below (console.log).

1. I matched your example to look like my data and it works fine.
   $scope.myContacts = {'Contacts':[{name: "Moroni", age: 50},
   {name: "Tiancum", age: 43},
   {name: "Jacob", age: 27},
   {name: "Nephi", age: 29},
   {name: "Enos", age: 34}]};
   $scope.gridOptions = { data: 'myContacts.Contacts' };

2. My socket.io fails
   var socket = io.connect();
   socket.emit('getalerts', {});
   socket.on('init', function (obj) {
   $scope.contacts = obj;
   $scope.$apply();
   console.log('$scope.Contacts ',$scope.contacts);
   $scope.gridOptions2 = { data: 'contacts.Contacts' };

3. The console shows very similar objects so I thought I'd be good to go.
   TIA
   John

console.log
$scope.myContacts
Object {Contacts: Array[5]}
Contacts: Array[5]
proto: Object
controllers.js:790
TypeError: Cannot set property 'gridDim' of undefined
at pre (http://localhost:8083/js/ng-grid.debug.js:1936:41)
at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:4226:13)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:3851:14)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:3854:12)
at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:3763:30)
at update (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:13890:11)
at Object.Scope.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:8090:28)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:7250:26
at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:6650:59)
at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js:6650:59)

When using 1.3.9 I get the following error. I do not get this when I revert back to 1.3.8. Is there a height method requirement now that I haven't found in the docs?

TypeError: Object [[object HTMLDivElement]] has no method 'height'
at pre (http://run.plnkr.co/80DCYSVYLismoEps/ng-grid.js:1978:80)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4208:13)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834:14)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837:12)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837:12)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4216:24)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834:14)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837:12)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3746:30
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:932:25

Self explanatory, the ability of being able to use bootstrap or jquery themes in the grid.

Grouping of columns is a very cool feature. But unfortunately it makes not always sense to group by every column.
Often there are columns which just contain an icon or a link like 'see more click here'. Grouping these columns is not neccessary so it would be nice if the developer could exclude such specific columns from that grouping option.
Advantages would be that the user only gets the usefull choises in the grouping menu which - the other way around - would also contain less options, what it makes easier to find the right option.
This could be handled like 'sortable' (so maybe 'groupable') option by defining the column in the model.

I'm trying to use ng-grid in a tab pane that's hidden on initial load.

I've found that the rows do not draw at all and the header/footer draw improperly on data instantiation. The header shows the right number of records and the columns are there in the column menu, but they're off to the left of the grid div.

If I activate the pane and resize the viewable area (either by opening firebug or resizing the browser window), the rows and other content will draw.

I'm not sure if I can demonstrate this in jsFiddle/plunkr, but I could try.

Hi,

I am using angularjs and had to change $interpolateProvider startSymbol and endSymbol to [[ ]] instead of using {{ }}. This was required due to conflict with server side templating engine.

When not using curly brackets, the ng-grid is not working properly as it failed to bind the data to the generated columns.

If I sort a column then change the model ( like remove an object) the sort order reverses. So in this plunker, if I order by customer it will list ABC first. Then if I click the trash can icon to delete a record the customer order is reversed with STI at the top.

http://plnkr.co/edit/brStKR

As much as it pains me to say. I think we need to at least support paging.

Hey, could you put some examples up on http://plnkr.co? I'd like to play with this without downloading it :-p

Hi,
in some cases the grid is hidden (example twitter bootstrap tabs). Is possible to expose explicit initialization to angular?

http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

I can scroll with MacBook touchpad (presumably, mousewheel) but in default view, scrollbar not always visible.

The "auto" width feature doesn't seem to calculate correctly unless I'm doing it wrong. I edited an example which can be seen here:

http://plnkr.co/edit/e5LJPP?p=preview

need to add selection checkbox on the left side with option to only select from the checkbox.

Getting this error (as stated in the subject line) when attempting to use your grid with a node.js/angular app (based on an app seed found at https://github.com/btford/angular-express-seed).

I've added 'ngGrid' to my app within the app.js (found under 'public/js/'):
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngGrid'])

I've ensured that ng-grid-1.4.1.js is added in the index.jade file (found under 'views/')

Inside the controllers.js file (found under 'public/js/') I've added the following within my ListLicenseCtrl (within a callback to my api):
function ListLicensesCtrl($scope, $http) {
$http.get('/api/licenses').
success(function(data, status, headers, config) {
$scope.licenses = data.licenses;
$scope.gridOptions = {
data: 'licenses',
columnDefs: [
{field:'orgId', displayName:'Org Id'},
{field:'organizationName', displayName:'Org Name'},
{field:'orderAgreement', displayName:'Order Agreement'},
{field:'licenseType', displayName:'License Type'},
{field:'status', displayName:'Status'}
]
}
});
}

Inside the jade template where the grid will be displayed I've added the following:
div(class="gridStyle", ng-grid="gridOptions")

Any ideas on how to resolve this problem?

Thanks,

Tami

Hi,
Is there a way to get at the values of the columnDefs array. I would like to store what the user has de-selected in the database and bring up those values the next time they login.
I.E.
1)set: columnDefs: [{field: 'ID', displayName: 'ID',visible:false},{field: 'LN', displayName: 'LN',visible:true}, {field: 'FN', displayName: 'FN',visible:true}]

2. runtime: user changes ID checkbox making it visible
3. I'd like to save the changed columnDefs but the following code still has values from 1)
   _.each($scope.gridOptions.columnDefs, function(item) {
   console.log(item) ;
   });
   Thanks,
   John

currently navigation happens at the row level. I would like to support the option of navigating cells and selecting cells. Possibly through a plugin?

I tried to use "cellTemplate" to insert a checkbox on the grid.
When I use ng-grid v1.4.0, it was fine but using v1.5.0, it did not work.

Here is plunker.

When you see the file panel left side in the plunker, I added two version of "ng-grid.js".

you can test this by changing the version of "ng-grid.js" in the "index.html" file.

http://plnkr.co/edit/MnLTGKAu6DU9hPtjp8ny

Allow for variable row heights on a row-by-row basis