ag-grid / ag-grid Goto Github PK

It would be great to pin the columns also on the right side of the table.

An example.

It would be great if you provide support for show/hide columns.
E.g.
https://datatables.net/extensions/colvis/

Hi!

I would need a checkbox header to select unselect all rows. It is very useful when you want to perform a full delete of all rows.

Regards!
Pablo García

A common theme with grids seems to be a need to export to csv/excel. I'd assume it would be much easier with a grid like this than something like jqgrid to get something built in.

Just curious if anybody shares that interest in having it built in or if it's just easy enough to do it post-implementation?

Hello,

I think the filters would be more intuitive to Angular Grid users if they functioned similar to how filtering works in Microsoft Excel. For instance, if I filter on one particular column in a data set, any additional filters should be limited to display only the filter options available based on the remaining data set from the first filter.

Not sure if this is already on the feature list or not!

The header columns move slowly when scrolling horizontally.

Currently if I filter the grid on one column and after that I change rowData and refresh the grid, the filtering is still there which is good, but if I sort the collumn, change rowData and refresh the grid, the columns will not have sorting enabled the way I sorted them in the first place.

So, in short, state of grid is saved for filtering but not for sorting.

I think it should also save the state for sorting but for those users of angular grid that want to reset state for these maybe the api could have methods like: resetFiltering, resetSort on angular grid.

Allow columns to resize themselves to fit the content of the longest cell. Suggested column definition syntax:
{ displayName: 'Url', field: 'url', width: 'auto' }

Hi @ceolter, I found this grid very interesting!

Could you please add support to map columns to nested data properties?

var data = [{
    name: 'juan',
    address: {
        street: '9 de Julio 544',
        city: 'Montevideo'
    }
}]

var coldef = [{
    displayName: 'name',
    field: 'name'
},{
    displayName: 'City',
    field: 'address["city"]'
}]

Could you please add the behavior, so the checkboxes in set-filters updates when a cell value is edited. Thank you in advance.

best regards,

osman

I'm interested in seeing a feature that accomplishes something similar to this ui-grid feature: http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu

Hi!

I've noticed that sometimes the pinned columns container layer does not fill all the grid height, and leaves a white space at bottom:

The problem is that the layer height of .ag-pinned-cols-viewport misses some pixels (corresponding to the not pinned rows horizontal scrollbar height, I think). I'm not sure as I've not swam into the code yet.

I'm using a Chrome 41.0.2272.118 on a Mac. In Safari it also seems to fail.
I've tested it on Chrome for windows and there you can see that the missing height is the same as the horizontal scrollbar, or 2 pixels higher...

Regards
Pablo García

Need both unit and e2e tests. Protractor and Jasmine.

A few things:

• Having the ability to select columns using CTRL or CTRL + Shift would be great for multiple select.
• Using arrow keys to move up and down or maybe even left and right would be great.

Hello!

Is it possible to place button into cell? And will it work with angular scope methods?

Reading through the story of "Why The World Needed Another AngularJS Grid" sounded hauntingly familiar. Bouncing from ng-grid, to pure Angular.js to looking into writing a d3/svg implementation.

I am curious, is there a way to mimic rowspan behavior like in HTML tables?

Hi,

In RowRenderer.prototype.putDataIntoCell
eGridCell.innerText = value;

doesn't work properly on firefox (at least under linux, firefox 36.0.1).
Cells are empty.

eGridCell.innerHTML = value;
works for me.

Adding ARIA roles such as

• grid
• row
• columnheader
• gridcell

would improve accessibility for the data since it's not being rendered with a table.

Styles are very hard to customize and manage in their current state. The build scripting looks pretty crazy, and it also looks like they are all combined and injected as a style tag in the head in the end, making overrides cumbersome and at the mercy of script execution sequence.

Ideally, keeping all of the css files in the organization you have them in src would make them easier to customize/override/improve.

The core styles for layout and functionality could be in a required angular-grid.css file, and the themess as optional files eg. angular-grid-fresh-theme.css would make theming a snap.

Hello,

I am working on using Angular Grid for a particular feature where I will send the grid a large amount of data from a server call. If infinite scrolling is in place, I need a way for the grid to be able to filter on my entire data set, not just rows 1-1000, for example. When using other grid libraries, I implemented this by setting up the filter options through running a specific query to return the filter options for that specific column. I tried this methodology within Angular Grid using the customs filter, yet was unsuccessful in writing the getGui function (the html i sent the function was not able to recognize my data variables.

Any suggestions on how I should proceed?

Thank you!

-Billy

Hi.

I'm wondering if you can help me. I've got a cellRenderer function that creates a hyperlink. I need to fire a ng-click action on the hyperlink. The function for my click is in my controller.

ng-click="groupClick('test')" or ng-click="search.groupClick('test')" ---- doesn't fire

Any help appreciated.

Vinny

How is it possible to use bootstrap for grid styling? Then this grid will fit perfectly into rest of application.

Please register this in Bower and NPM. I would love to consume it right away!

If I'm not mistaken, I think angular-grid is already registered to ng-grid/ui-grid here: https://github.com/angular-ui/ng-grid. I suggest finding a unique bower name, and registering in the bower registry.
http://bower.io/docs/creating-packages/#register

Hi,

It would be great to have a totalizer row, which shows the aggregate data of all rows, like this:

Regards
Pablo García

Is there a way to achieve this? I'm thinking the getRows function in the datasource can be extended to include the filter and sorting parameters

The ability to determine if the total column widths are < than the width of the grid, it would be nice to fill the columns to equal the grid width. http://www.screencast.com/t/DLuA5bQWzhO

Ember table supports this:
http://addepar.github.io/ember-table/#/ember-table/documentation

So does my grid:
https://github.com/Swimlane/angular-table/blob/master/src/table.js#L96

The tricky part is dealing with when a user resizes a column after a force fill but then resizes the table to be greater than the widths again ;)

Virtual/Infinite scrolling is awesome but sometimes you need to give perspective to where you are at in the actual page structure so a user can leave and come back and easily find the item they were viewing.

I've implemented something like this on https://github.com/Swimlane/ng-table but I'd love to work with you to integrate this into your grid to make the ultimate grid! :)

It will be nice to have a context menu support. Right click event on a row.

It would be great for custom renderers to accept a promise that resolves the cell/header content. Some things just needs to be async sometimes ;)

So far, I'm confused on how to make a build or contribute to this repo. We should definitely get things switched over to a gulp build and more standard build and test tools.

Hi!

It would be useful to make pagination panel extractable, that way you could place it anywhere in you app.

Thanks.

Mouse wheel does not scroll table when mouse is above pinned columns.

Hi,

I just noticed that when using a column as editable, that uses a checkbox for selection, after editing the field the checkbox is not redraw.

Please take a look at the example http://www.angulargrid.com/example.html

1. Select Editable Yes.
2. Edit the Name column.

You will notice the checkbox is not redraw

regard,

Hi, impressive grid! Thanks for sharing it with the community.

I was playing with your "Test Drive" page and found a bug with it.

Here is how to reproduce it on the Test Drive page:

1. Enter text to filter by in the "Filter..." input. I used "Sophie".
2. Select a property to Group By. I used "Language".
3. Try to click Expand All or Collapse All. Nothing happens.

this is simple demo you have
// body...
$scope.columnDefs = [
{displayName: "Make", field: "make"},
{displayName: "Model", field: "model"},
{displayName: "Price", field: "price"}
];

$scope.rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

$scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    rowData: $scope.rowData,
    dontUseScrolls: true // because so little data, no need to use scroll bars
};

if move it into function then it does not work anymore

var module = angular.module("example", ["angularGrid"]);

module.controller("exampleCtrl", function($scope) {

$scope.showgrid = function (argument) {
console.log('init table');
// body...
$scope.columnDefs = [
{displayName: "Make", field: "make"},
{displayName: "Model", field: "model"},
{displayName: "Price", field: "price"}
];

$scope.rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

$scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    rowData: $scope.rowData,
    dontUseScrolls: true // because so little data, no need to use scroll bars
};

}

});
function on click is called but no table generated.

Hi,

Great module! I'm just starting to integrate it into my app, hoping that it will go smooth.
Can you please state the version number on the top of the js file? It confuses me when I don't know if I should upgrade or if i have the latest...

Thanks!

One of my favorite features in ng-grid (and kendoUI grid) is the expandable grid.
Can this be achieved with the current API?

Playing around with the demos on angulargrid.com, I noticed that the mouse wheel scroll behavior is odd. I'm on a Mac using Chrome 41.0.2272.104 and a Magic Mouse. The built-in browser (OS?) scrolling behavior includes acceleration and deceleration, but those don't happen inside the grid.

The other problem (possibly related) is that scrolling with the mouse wheel inside the grid works for a short time, and then the entire browser window scrolls, and I have to scroll back up to see the grid.

Edit: It looks like this is called "inertial scrolling" or "momentum scrolling". Some links that might help:
http://stackoverflow.com/questions/4339196/how-to-detect-disable-inertial-scrolling-in-mac-safari
http://www.hnldesign.nl/work/code/momentum-scrolling-using-jquery/ (jquery, but maybe still informative)

When I set to multi select, when clicking a new row i would expect it to deselect the previous one. Perhaps, checkboxes would be a ideal solution for this too?

What all browser versions are supported?

It would be great to have the src styles utilize a css preprocessor.

move site code to another repo.

Would like an option keepLastSelected that would allow de-selection of the selected row in "single" selection mode when the selected row is clicked.

I will frequently browse a grid, and see something I want to copy (for a subsequent "paste" into another application) in a cell or maybe multiple cells. Seems like that's not supported in this grid: I can't select anything for copy/paste. If I'm right, then I'd like to make a request to get that functionality added somehow!

Hi!

I've been testing your grid with some browsers, and it seems that headers in Firefox are not being shown (probably a z-index issue of the layer).

Regards
Pablo García

Column re-ordering would be a nice feature, you already have resizing.

Is this possible?