Posts

Showing posts with the label Ng-grid

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
If you've looked at my catalog-demo, you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids.




Code:
$scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); };
Solution: https://fassetar.github.io/blog-examples/uigrid-responsiveheight/

Notes
To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap table is very basic and proba…

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
If you've looked at my catalog-demo, you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids.




Code:
$scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); };
Solution:

Notes
To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap table is very basic and probably could use a lot more styling. Like the column controls could l…

Ng-grid: Export Feature

From a front-end standpoint it's easy to use ng-grid since a lot of the variables already exist. What I did in my implementation was leverage as much of ng-grid as possible before creating my own functions. Displayed fields in the grid that are checked by default are also checked in the export dialog. This feature was written up to handle hidden fields in the grid as well and gives the user the option to select or deselect all the available fields to export. However this example assumes that "name" field is a key on the server side and if passed to the server could give you whatever is in the database. So if you were looking to attach this to a more meaningful system you would pass just the key and fields to the server in order to get your results.

Solution:
<!--Html part--> <button type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#exportModal">Export to Data</button> <div cla…

Ng-grid: Start and End Items for a Grid

With my recent experience using ng-grid, I came up with two dynamic variables that would display based on the location of where they were in relationship to a particular page. I wasn't sure how to find a specific example on this. Since most might wrap this up with pagination concept it's difficult to find something on this for Ng-grid.. Not that I need an example but I like to think of them as separate, or as metadata.

Dependency
     I could have made the dependency on a ajax  return call but I had multiple ways for the Grid data to be insert, so rather than set it at that point I just hooked in the dom. If you wanted to go the other route just change the self.domAccessProvider call  to whatever you name your data object in the grid . As for the start number this is easier to handle, so there is no dependencies.

Solution
$scope.endItem = function () { var self = this; //Last page... if (self.maxPages() == self.pagingOptions.currentPage) { …

Ng-grid: Sorting Ascending and Descending with Font-Awesome

I wrote this little snippet for some requirements a while back but since it's so general and if it helps the project to have a quick template to grab it I think it would be much greater to share. Also I was just wanted to write out the documentation as I was learning Angularjs along with ng-grid for the first time during the time I wrote it. So it should be clear that the dependencies are Font-awesomeNg-grid and Angularjs for this snippet.

When I wrote this when I was using Angularjs v1.2.16 stable, font-awesome v4.1.0 both it should not be a problem moving forward but with Ng-grid I used v2.7. It may break with later version as I know a lot has or will change in the template. This snippet should work in all browser but I only tested for Chrome, FireFox, IE8 and greater.

My Code
$templateCache.put("headerCellTemplate.html", "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\&q…

Ng-grid: Display Two Fields in One Column

Task
For ng-grid I have a set of fields in which they are pulled in via ajax however, when I have setup the cell template I need to not only display one field as a column but instead in the first column with the second another field.

Solution
I feel the documentation wasn't very clear on this point but the solution is simply using row.getProperty() with the field you want in quotes.Plunker Example using two column in the same column definition.

Resources
Defining columns · angular-ui/ng-grid Wiki · GitHub
Templating · angular-ui/ng-grid Wiki · GitHub
cellTemplate and grouping: can I change the template for the 'grouping' row - Stack Overflow
how to apply field on cell Template using ng-grid - Stack Overflow