Just starting to work with AngularJS and ui-grid, and I encounter a major issue.
My problem is as following:
I use different ui-grid components in the same HTML page. All of those ui-grid components have one specific identifier in common.
For example, let's take 2 ui-grid as example :
[ui-grid N°1] identifier is defined in a row entity value.
[ui-grid N°2] identifier is defined in a column title name.
One of my requirement:
When clicking on the row where the identifier is defined [ui-grid N°1], it shall highlight its entire row [ui-grid N°1] AND the entire column of the other grid [ui-grid N°2] where identifier is also defined.
The row selection isn't an issue and I succeeded to highlight the entire column of the second ui-grid thanks to specific cellClass function and, more important, the
gridApi2.core.notifyDataChange(sourceGridConstants.dataChange.COLUMN);
This worked fine until I had to apply a cellTemplate option to the ui-grid N°2.
cellTemplate:'<span ng-click="grid.appScope.gridCtrl.cellClicked(col)">{{row.entity.name}}</span>'
Now, when firing the notifyDataChange, nothing happens.
If I remove the cellTemplate option, the refresh is done on the grid and the column is highlighted as expected.
Has anyone encountered this issue ?
If so, is there any way to refresh the grid with a cellTemplate option defined ?
Related
In the angular ui grid i have too many columns to display.
Want to display extra columns as expand collapse under each row.
Which means expand/collapse button will be provided for each row and while exanding a particular row the extra columns headertemplate will b displayed along wil b displayed along with column values.
Is it poasible with angular ui grid
As far as , there is no an option for that.
You can use the following to make things work as you wish:
remove default row headers by setting to false enableExpandableRowHeader
adding a custom row header by calling $scope.gridApi.core.addRowHeaderColumn
For reference :
http://ui-grid.info/docs/#/tutorial/114_row_header.
http://ui-grid.info/docs/#/tutorial/216_expandable_grid.
i am using ng-grid 2.0.11 with angularjs 1.2.16
I am facing one strange issue while display data in grid.
When i am trying to load data some of the column getting displyed in grid. Once i resize
browser then it triggers event and shows all the columns defined in the column definition.
Some of the column displayed means data binding is not the issue.
But yes i have cell templates and row tempalte defined.
How i can resolve this issue ?
-Thanks,
Yogesh
You can try setting the width to auto, or see this link for another option:
is there a way to auto adjust widths in ng-grid?
Or perhaps minWidth and maxWidth would work for you:
https://github.com/angular-ui/ng-grid/wiki/Defining-columns
I have a pretty basic grid with Angular.js using the NG-Grid plugin.
http://plnkr.co/edit/FRCndA
How can I prevent user from changing third Column to VALID if second column is blank,(Third Row).
I have an array of objects that I want to show in ng-grid. Each row has a boolean property isVisible. In the ng-grid I want to show only the rows where isVisible is true. The other rows should be completely hidden.
I have tried using a rowTemplate and databinding a ng-show to isVisible. That hides the content of the row, but leaves the actual row in place, showing an empty row.
I have tried using filterOptions, but can't figure out the correct syntax to do such a filtering. I couldn't find any good documentation on how to set it.
I have even tried modifying the gridTemplate in the ng-grid source, by trying to add a filter on ng-repeat=\"row in renderedRows\", but I haven't gotten that to work either.
I guess I could modify the array itself, by temporarily removing rows, but I would prefer not to do it that way, since I have to be able to show the rows again (It is actually an expander that I'm doing, that should hide/show sub-rows)
Try also conditionally setting the height of the row in the template to '0' based on isVisible or use a CSS class with ng-class. Play with the CSS of it until you get the desired effect and then you can use that in your template.
This sounds like the type of thing that would benefit from using height and CSS animations actually so it opens and closes with an animated style. If you have a jsFiddle sample I'd be happy to try and help.
Edit: After looking at how the grid actually lays out it's rows (absolutely positioned) you only really have two options I can think of:
1) Filter the data you are binding to the grid through a function like dataVisible() but keep the full data list internally in the controller so you can show/hide easily
2) Submit a patch to the ng-grid project (or fork it) with the filtering capability you are looking for. Out of the box it doesn't appear to support this scenario.
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards