angular-ui / ui-grid Goto Github PK

View Code? Open in Web Editor NEW

5.4K 5.4K 2.5K 21.22 MB

UI Grid: an Angular Data Grid

Home Page: http://ui-grid.info

License: MIT License

JavaScript 94.10% Shell 0.05% HTML 3.62% CSS 0.24% Less 1.97% TypeScript 0.01%

angular javascript ui-grid

ui-grid's Introduction

AngularUI - The companion suite for AngularJS

Usage

Requirements

AngularJS v1.0.0+ is currently required.
jQuery / Plugins (depends on directive). Check specific directive dependencies for more information

Installation

The repository comes with the modules pre-built and compressed into the build/ directory.

angular.module('myApp', ['ui']);

The modules can be found in the Directives and Filters folders. Check out the readme file associated with each module for specific module usage information.

Development

You do not need to build the project to use it - see above - but if you are working on it then this is what you need to know.

Requirements

Install Node.js and NPM (should come with)
Install local dependencies:

$ npm install

Install global dependencies grunt, coffee-script, and testacular:

$ npm install -g testacular coffee-script grunt

Build Files & Run Tests

Before you commit, always run grunt to build and test everything once.

$ grunt

Test & Develop

The modules come with unit tests that should be run on any changes and certainly before commiting changes to the project. The unit tests should also provide further insight into the usage of the modules.

First, start the testacular server:

$ grunt server

Then, open your browser to http://localhost:8080 and run the watch command to re-run tests on every save:

$ grunt watch

Publishing

For core team: if you wish to publish a new version follow these steps:

Bump the version number inside package.json
Build and test
Commit the updated package.json and build/ folder on their own commit
Tag the commit: git tag v[maj].[min].[patch]
Push the tag: git push [angular-ui] master --tags

ui-grid's People

Contributors

Stargazers

Watchers

Forkers

d3ck3r felixhummel mschroering ajoslin johlrich francescoagati martin17 yanl orneryd joshharbaugh jurby bundance archsh seankenny bendalton codebreach jeado maxcan ineedfat simplyjames kdstew sravanthipoujula hawtio avgalon getuliojr boland ballmw koen-serry zhangdiwaa presidento johntom timstrze andrewalker zhanghaihua gitschmidt cwhopkins donderda premier pdegenhardt jstrachan mxreppy sonicparke johnparn ksmoore asvetlana clkao hoshidaniel satyanand kmussel wiinis tcrimi jspeshu skusunam antonfend benmj jharohit alpinegizmo sskyy konrad-garus jozzhart benaiah rehia timactive h63542 nchistyakov pionize richtmat gsfyrakis alasdairswan jiacomino keithharvey a5sk4s maxlang pbrickell thedarkjester jmaynier urvilkaswala blackneus dean-me dcolens imloama ppollono sourcec0de krahman jeffslofish r7lemieux loiphamvn mgibson jessegavin firmusoft etishor sapronlee webjars ericengineered alexspurling garaboncias swalters bmleite dashue energyplus

ui-grid's Issues

How to reload data received async?

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?

Newest version gives height error

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

http://plnkr.co/edit/hUZvR3

Thanks! Brad

error with groups options

in grid options with

groups:['name','surname']

i have the error undefined has no method toString

Drag to re-order rows

Enhance grid to allow drag re-ordering of rows

Expand Grouped Row with One Item

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.

Cell navigation and cell selection

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

Option for "fixed" columns

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

socket.io

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

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' };
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' };
The console shows very similar objects so I thought I'd be good to go.
TIA
John

angular.js:5582
io $scope.contacts
Object {Contacts: Array[4]}
Contacts: Array[4]
proto: Object
controllers.js:798

grid generating very large height

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

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

not working when interpolateProvider is changed in Angularjs

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.

rowTemplate not working

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?

column option 'groupable'

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.

headerClass not being applied

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

cellFilter and html

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!

Is there a way to prevent the grid from trying to initialize until the data is there?

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.

angular.js:5563

Here's a pluker: http://plnkr.co/edit/JvlXxc

And the Google Group thread. I can look into using routes but is that the best way to handle this?
https://groups.google.com/forum/?fromgroups=#!topic/angular/dYVHwEf5g0Q

Thanks!

Cell / Row / Header templates as separate html partials

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'
 };

Update documentation for 1.0 release

Need to add updated documentation and examples for the 1.0 release

Dynamically adding columns and automatically sizing height

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!

Add builtin filtering support via plugin

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

Add ability to hide/show reorder columns via plugin

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

"Auto" width not working in 1.3.2

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

model change reversing sort order

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

Add selection checkbox

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

Please fix the old wiki links in the new repo (e.g. Configuration Options). nT

...

Grid does not render properly when it is hidden (such as in a tab)

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.

Select / Unselect all doesn't trigger 'selection change' events

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.

cannot recognize the data changes immediately.

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 ));
};

ReferenceError: dateRE is not defined

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

Cannot set property 'gridDim' of undefined

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

Column Virtualization

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

Cannot read property '$$phase' of undefined

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

Cannot recognize the data changes again, in version 1.5.0

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

?Put Examples up on Plunker

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

wish-list of enhancements

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!

Add Plugin support

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

socket.io

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

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' };
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' };
The console shows very similar objects so I thought I'd be good to go.
TIA
John

angular.js:5582
io $scope.contacts
Object {Contacts: Array[4]}
Contacts: Array[4]
proto: Object
controllers.js:798

scrollbar on examples not always visible

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

Variable row heights

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

adjustScrollTop consumes 90% CPU when running with batarang

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

Dynamic column adding..

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
        };

Remove dependency on jquery

we should be able to remove all dependency on jquery.

Grouping display

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

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

External Filter

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

Non-printable unicode character in ng-grid.css

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

Layout problem with FF 16

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

ColumnDefs

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}]

runtime: user changes ID checkbox making it visible
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

angular-ui / ui-grid Goto Github PK

ui-grid's Introduction

AngularUI - The companion suite for AngularJS

Usage

Requirements

Installation

Development

Requirements

Build Files & Run Tests

Test & Develop

Publishing

ui-grid's People

Contributors

Stargazers

Watchers

Forkers

ui-grid's Issues

Recommend Projects

Recommend Topics

Recommend Org